Looking for documentation on gluestack-ui v2 with NativeWind? Refer to this link.

New Project

If you are starting with a new project, you can use npx to create a new project with gluestack-ui.
npm create gluestack@1
The above command will create a new Expo project with @gluestack-ui/themed installed and configured.
You can directly use all the components by directly importing them in your project.
import { Button } from '@gluestack-ui/themed';

Existing Project

Create a new Expo projects if it doesn't already exist
npm install --global expo-cli
expo init my-project
cd my-project/
Refer this link for additional information on Expo and setting up an Expo starter app.
If you wish to install gluestack-ui into your existing project, you can proceed with the following steps:

Step 1: Install dependencies

yarn add @gluestack-ui/themed @gluestack-style/react react-native-svg@13.4.0
OR
npm i @gluestack-ui/themed @gluestack-style/react react-native-svg@13.4.0

Step 1.5: Default Theme (Optional)

gluestack-ui is intentionally designed as an unstyled library, providing you with the flexibility to style your components as you prefer. However, if you want to use the default theme, you can install @gluestack-ui/config as well.
yarn add @gluestack-ui/config@latest
OR
npm i @gluestack-ui/config@latest

Step 2: Configure the GluestackUIProvider

The GluestackUIProvider is a component that provides aliases and tokens throughout your app, using React's Context API. It should be added to the root of your app.
You can update your App.tsx file as follows:
import { GluestackUIProvider, Text, Box } from "@gluestack-ui/themed"
import { config } from "@gluestack-ui/config" // Optional if you want to use default theme


export default function App() {
  return (
    <GluestackUIProvider config={config}>
      <Box width="100%" justifyContent="center" alignItems="center">
        <Text>Open up App.js to start working on your app!</Text>
      </Box>
    </GluestackUIProvider>
  )
}
This ensures that all components are wrapped with <GluestackUIProvider />, and the theme from @gluestack-ui/config is applied.
This guide should help you get started with gluestack-ui in your expo project. If you run into any issues or have further questions, please refer to the official documentation or community forums.