Part 2: Integrating Gluestack UI

Installing Gluestack UI

1. Open up your VSCode terminal and run the following command:

   npx gluestack-ui init
   

2. Go through any prompts that pop up, and give wait for Gluestack UI to finish installing.

3. Observe that there is now a components directory in your working directory:

4. Open your App.tsx file and observe that your <View/> component has been wrapped in a <GluestackUIProvider/> component. The indentation may be off - feel free to fix it to match the following code:

   <GluestackUIProvider mode="light">
     <View style={styles.container}>
       <Text>Count: {count}{Platform.OS == "android" && ' '}</Text>
       <Button title="Increase Count" onPress={() => setCount(count + 1)}/>
       <Button title="Decrease Count" onPress={() => setCount(count - 1)}/>
       <StatusBar style="auto" />
     </View>
   </GluestackUIProvider>

   The <GluestackUIProvider/> will provide styling for Gluestack UI components you use inside of it. You may need to restart your Expo Go preview for these changes to take effect.

Using Gluestack UI Components

1. Check out the Gluestack UI documentation to view their available components. Follow the instructions in the documentation to add the Text, Heading, and Button components to your project.

2. Incorporate the Text, Heading, and Button components into your code. Add a <Heading/> component above the <Text/> component and fill it with the following text: Simple Counter. For the Text and Button components, you will need to update your imports to import those components from your components directory instead of 'react-native'. For the Heading, you will need to add a new import statement.

3. Edit the button code according to examples in Gluestack UI's documentation for the Button component.

4. Restart your Expo Go preview. At this point, your app should look something like this:

Next up: Part 3