Add navigation

Add a new screen to the stack

Let's create a new file named about.tsx inside the src/app directory. It displays the screen name when the user navigates to the /about route.

import { Text, View, StyleSheet } from 'react-native';

export default function AboutScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>About screen</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#25292e',
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: '#fff',
  },
});

Inside src/app/_layout.tsx:

1. Add a <Stack.Screen /> component and an options prop to update the title of the /about route.
2. Update the /index route's title to Home by adding options prop.

import { Stack } from 'expo-router';

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ title: 'Home' }} />
      <Stack.Screen name="about" options={{ title: 'About' }} />
    </Stack>
  );
}

Navigate between screens

We'll use Expo Router's Link component to navigate from the /index route to the /about route. It is a React component that renders a <Text> with a given href prop.

1. Import the Link component from expo-router inside src/app/index.tsx.
2. Add a Link component after <Text> component and pass href prop with the /about route.
3. Add a style of fontSize, textDecorationLine, and color to Link component. It takes the same props as the <Text> component.

import { Text, View, StyleSheet } from 'react-native';
import { Link } from 'expo-router';

export default function Index() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Home screen</Text>
      <Link href="/about" style={styles.button}>
        Go to About screen
      </Link>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#25292e',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    color: '#fff',
  },
  button: {
    fontSize: 20,
    textDecorationLine: 'underline',
    color: '#fff',
  },
});

Let's take a look at the changes in our app. Click on Link to navigate to the /about route:

Add a not-found route

When a route doesn't exist, Expo Router displays a default screen for it. We can use a +not-found route to replace that screen with a custom fallback screen on mobile and web. Expo Router uses a special +not-found.tsx file to handle this case.

1. Create a new file named +not-found.tsx inside the src/app directory to add the NotFoundScreen component.
2. Add options prop from the Stack.Screen to display a custom screen title for this route.
3. Add a Link component to navigate to the / route, which is our fallback route.

import { View, StyleSheet } from 'react-native';
import { Link, Stack } from 'expo-router';

export default function NotFoundScreen() {
  return (
    <>
      <Stack.Screen options={{ title: 'Oops! Not Found' }} />
      <View style={styles.container}>
        <Link href="/" style={styles.button}>
          Go back to Home screen!
        </Link>
      </View>
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#25292e',
    justifyContent: 'center',
    alignItems: 'center',
  },

  button: {
    fontSize: 20,
    textDecorationLine: 'underline',
    color: '#fff',
  },
});

To test this, navigate to http://localhost:8081/123 URL in the web browser since it is easy to change the URL path there. The app should display the NotFoundScreen component:

Add a bottom tab navigator

At this point, the file structure of our src/app directory looks like the following:

We'll add a bottom tab navigator to our app and reuse the existing Home and About screens to create a tab layout. This is a common navigation pattern in many social media apps, such as X and Bluesky. We'll also use the stack navigator in the Root layout so the +not-found route displays over any other nested navigators.

1. Inside the src/app directory, add a (tabs) subdirectory. This special directory is used to group routes together and display them in a bottom tab bar.
2. Create a (tabs)/_layout.tsx file inside the directory. It will be used to define the tab layout, which is separate from Root layout.
3. Move the existing index.tsx and about.tsx files inside the (tabs) directory. The structure of src/app directory will look like this:

Update the Root layout file to add a (tabs) route:

import { Stack } from 'expo-router';

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
    </Stack>
  );
}

Inside (tabs)/_layout.tsx, add a NativeTabs component to define the bottom tab layout. Native tabs use the platform's native tab bar on Android and iOS:

import { NativeTabs } from 'expo-router/native-tabs';

export default function TabLayout() {
  return (
    <NativeTabs>
      <NativeTabs.Trigger name="index">
        <NativeTabs.Trigger.Label>Home</NativeTabs.Trigger.Label>
      </NativeTabs.Trigger>
      <NativeTabs.Trigger name="about">
        <NativeTabs.Trigger.Label>About</NativeTabs.Trigger.Label>
      </NativeTabs.Trigger>
    </NativeTabs>
  );
}

Native tabs don't add a header to the screens, so the Home and About screens no longer have one. On web, the tabs appear as a list of labels at the top of the page.

On web, the browser console may log a hydration error ("A tree hydrated but some attributes of the server rendered HTML didn't match the client properties"). This is a known Expo Router issue with server rendering (expo/expo#52249), not a problem in the tutorial code. The tabs still work.

Let's take a look at our app now to see the new bottom tabs:

Update bottom tab navigator appearance

Right now, the bottom tab navigator doesn't match the style of our app. For example, the tabs don't display icons, and the tab bar colors don't match the app's background color.

Modify the src/app/(tabs)/_layout.tsx file to add tab bar icons:

1. Add a NativeTabs.Trigger.Icon component inside each NativeTabs.Trigger. The md prop takes a Material Symbols name for Android. The sf prop takes an SF Symbols name for iOS.
2. Pass an object with default and selected keys to the sf prop. iOS displays the selected icon when the tab is active.
3. Add the tintColor prop to the NativeTabs component and set its value to #ffd33d. This changes the color of the icon and label of the active tab.

import { NativeTabs } from 'expo-router/native-tabs';

export default function TabLayout() {
  return (
    <NativeTabs
      tintColor="#ffd33d"
    >
      <NativeTabs.Trigger name="index">
        <NativeTabs.Trigger.Label>Home</NativeTabs.Trigger.Label>
        <NativeTabs.Trigger.Icon
          sf={{ default: 'house', selected: 'house.fill' }}
          md="home"
        />
      </NativeTabs.Trigger>
      <NativeTabs.Trigger name="about">
        <NativeTabs.Trigger.Label>About</NativeTabs.Trigger.Label>
        <NativeTabs.Trigger.Icon
          sf={{ default: 'info.circle', selected: 'info.circle.fill' }}
          md="info"
        />
      </NativeTabs.Trigger>
    </NativeTabs>
  );
}

The icons need no install step. On Android, the expo-symbols library from the default template provides Material Symbols. On iOS, SF Symbols are part of the system. On web, the tabs display only their labels.

Let's also change the background color of the tab bar using the backgroundColor prop:

<NativeTabs tintColor="#ffd33d" backgroundColor="#25292e">

The backgroundColor prop applies #25292e to the tab bar on Android and web. On iOS 26 and later, backgroundColor has no effect. The tab bar uses Liquid Glass, which follows the device's light or dark appearance.

Our app now has a custom bottom tabs navigator:

Update the ripple and indicator colors for Android

On Android, the tab bar still uses two colors from the default Material 3 theme. Pressing a tab displays a ripple effect. The active tab displays an indicator behind its icon. Neither color matches our app's color palette.

Add the indicatorColor and rippleColor props to the NativeTabs component in src/app/(tabs)/_layout.tsx:

<NativeTabs
  tintColor="#ffd33d"
  backgroundColor="#25292e"
  indicatorColor="rgba(255, 211, 61, 0.2)"
  rippleColor="rgba(255, 211, 61, 0.3)"
>

In the above code:

• indicatorColor sets the color of the indicator behind the active tab on Android, and the background of the active tab on web.
• rippleColor sets the color of the ripple effect that displays when a user presses a tab on Android.

Now, the ripple and the indicator use the yellow color of the active tab: