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

Existing Project

If you wish to install gluestack-ui into your existing project, you can proceed with the following steps:

Step 1: Installation and Initial Setup

First, install the latest version of gluestack-ui and its peer dependencies in your project. This can be done using the following command:
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 } 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}>
      <Text>Hello World!</Text>
    </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.