React Native Expo Tutorial #1 | Expo Router And Bottom Tab Navigator

You can also watch the YouTube video:

React Native Expo Tutorial #1 | Expo Router and Bottom Tab Navigator

Creating the Expo App

npx create-expo-app@latest --template

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

Delete package-lock.json file and run yarn command If you want to use 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 { 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;

That's it for this tutorial, we installed expo router and made file structure and bottom tab navigator.

Next tutorial we'll install gluestack ui and start designing our app much more easier.