React Native Expo Tutorial Temu Clone - Expo Router & Gluestack Ui Installation

You can also watch the YouTube video:

React Native Expo Tutorial Temu Clone - Expo Router & Gluestack Ui Installation

Creating the Expo App

npx create-expo-app@latest --template

> Choose a template? >> Blank (Typescript)
> What is your app named? >> expo-temu

Delete package-lock.json file and run yarn command If you want to use yarn.

If you haven't installed yarn yet:

npm install --global yarn

yarn

Start the project before we install anything to make sure everything is working.

yarn start

Press the "a" for Android or "i" for iOs

Installing Expo Router

npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar

Add main field to package.json

{
    "name": "expo-ecommerce",
    "version": "1.0.0",
    "main": "expo-router/entry", // this line

    // .. rest of the package.json file
}

Add scheme field to app.json

{
  "expo": {
    "name": "expo-ecommerce",
    "slug": "expo-ecommerce",
    "scheme": "expo-ecommerce", // this line

    // .. rest of the app.json file
  }
}

Restart your app:

yarn start --clear

Creating Expo Router File Structure

Let's create app folder for expo router and (tabs) folder for bottom tab navigator.

app/_layout.tsx file:

import React from "react";
import { Stack } from "expo-router";
import { StatusBar } from "expo-status-bar";

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

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

export default RootLayout;

app/(tabs)/_layout.tsx file:

import { Tabs } from "expo-router";

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

export default TabLayout;

app/(tabs)/index.tsx file:

import { Text, View } from "react-native";

const HomeScreen = () => {
  return (
    <View>
      <Text>HomeScreen</Text>
    </View>
  );
};

export default HomeScreen;

app/(tabs)/cart.tsx file:

import { Text, View } from "react-native";

const CartScreen = () => {
  return (
    <View>
      <Text>CartScreen</Text>
    </View>
  );
};

export default CartScreen;

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 expo router and gluestack ui. We created bottom tab navigator and now our app ready to build.

Next tutorial we'll start building user screen.