React Native Expo Tutorial #2 | Gluestack Ui (tailwind Css Library)

You can also watch the YouTube video:

React Native Expo Tutorial #2 | Gluestack UI (Tailwind CSS Library)

Installing Gluestack UI (Tailwind CSS Library)

npx gluestack-ui init

> Detected an Expo project, continue? >> Yes

> Proceed with caution. Make sure to commit your changes before proceeding. Continue? >> Yes

Installing Lucide Icons for React Native

First, ensure that you have react-native-svg (version between 12 and 15) installed. Then, install the package:

yarn add lucide-react-native

Installing Required Dependencies for Our Project

npx gluestack-ui add icon text box button card heading hstack vstack image

Let's make some changes in our app to use Gluestack UI.

app/_layout.tsx file:

import "@/global.css";

import { GluestackUIProvider } from "@/components/ui/gluestack-ui-provider";
import { Stack } from "expo-router";
import { StatusBar } from "expo-status-bar";

const RootLayout = () => {
  return (
    <GluestackUIProvider>
      <StatusBar style="auto" />

      <Stack>
        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
      </Stack>
    </GluestackUIProvider>
  );
};

export default RootLayout;

app/(tabs)/_layout.tsx file:

import { Icon } from "@/components/ui/icon";
import { Tabs } from "expo-router";
import { Home, ShoppingCart } from "lucide-react-native";

const TabLayout = () => {
  return (
    <Tabs screenOptions={{ tabBarActiveTintColor: "blue" }}>
      <Tabs.Screen
        name="index"
        options={{
          title: "Home",
          tabBarIcon: () => <Icon as={Home} />,
        }}
      />
      <Tabs.Screen
        name="cart"
        options={{
          title: "Cart",
          tabBarIcon: () => <Icon as={ShoppingCart} />,
        }}
      />
    </Tabs>
  );
};

export default TabLayout;

That's it for this tutorial, we installed gluestack ui and add icons to our bottom tab navigator.

Next tutorial we'll create sign in, sign up, forgot password and otp components.