How to set up Expo app navigation using React Navigation

Further to my previous post which explained how to build a react native app using Expo, this post takes it a step further and shows you how to set up all 3 types of Expo navigation in your app – Stack Navigation, Tab Navigation, and Drawer Navigation. By the time you’ve worked through both posts and followed this Expo React Native navigation example, you should have a simple Expo app running on your device with the ability to navigate in different ways between pages. You will also be able to combine different Navigators in a React Expo app. I’ll also cover some basic styling, so by the end you will have a great app framework to build on.

Which Expo navigation package?

There are a few different navigation packages available for Expo (React Navigation, React Router…) but for this article we’ll be using React Navigation, which is recommended to be used with Expo. I’ve never had any issues with it and I also know it works well with Redux. I won’t go into that now but it will become important as you build more complex apps, so it’s worth mentioning (React Navigation documentation).

Getting started by installing and creating a basic Expo App

I’m presuming you’ve read my other posts which explain how to install the Expo cli and how to create a React Native app with Expo. If you’ve completed all the steps, you’ll already have a basic Expo app installed and running. That’s where this post takes over….

Install the React Navigation npm package

First of all you need to install the React Navigation package itself, so on the command line type this:

npm install @react-navigation/native

And then this, to install Expo dependencies:

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

Now you’re ready to start coding your pages and then navigating between them, and for this you need to install the Stack Navigator.

Expo stack navigator for basic navigation

The stack navigator is the simplest of the three, and let’s you simply move from one page to another using a link or button that you have put on your page. You’ll then define a ‘stack of pages’ and navigate through them. To install the Stack Navigator, type this :

npm install @react-navigation/stack

Create a 2 screen Expo App

Now we can start coding a simple 2 screen Expo app that let’s you navigate to and from each screen. This is the most basic navigation set up. First of all you need to reference all required packages in your app.js file :

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { StyleSheet, Text, Button, View } from 'react-native';

… and then create a Stack Navigator.

const Stack = createStackNavigator();

Writing the code for each page of your app

Next we build the method for our pages, one for the Home page, and one for the Details page :

function Home({ navigation }) {
  return (
    <View style={styles.container}>
      <Text>Home Screen</Text>
      <Button
        title="Show me the Details screen"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function Details({ navigation }) {
  return (
    <View style={styles.container}>
      <Text>This is the Details page</Text>
      <Button
        title="Back to the Home Screen"
        onPress={() => navigation.navigate('Home')}
      />
    </View>
  );
}

NOTE – I’ve included a bit of styling, which just makes sure the page content is centred nicely.

Writing the NavigationContainer code in App.js

Now we’ll build up the main method in app.js, which defines the overall StackNavigator and specifies which page to show first, in the initialRouteName property.

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Details" component={Details} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Run the app to check it using expo start

Now run that to test your changes – type expo start on the command line if it is not already running. Or simply save your file to refresh it if it already is. You’ll see the Home page load with a button on it. That button takes you to the Details screen, and on the Details screen is another button which takes you back to the Home screen. And that is all you need for some simple Expo navigation!

The two-screens-nav branch in my git repo contains the code up to this point. See the link at the bottom of this post for access to the full source code for this example Expo app.

Combine different navigators in an Expo app

You’ll probably find that you also want to have another type of navigation in your app, either some Tab navigation, or Drawer navigation. Read on for how to combine them.

Combining stack navigation with tab navigation in Expo

Before you can add tab navigation to your Expo app, you need to decide whether you want to install top tabs or bottom tabs, and whether you want to :

• nest a Stack Navigator in a Tab Navigator – or
• nest a Tab Navigator in a Stack Navigator

I’m going to add some bottom tabs to our app, and we will be doing the first option, nesting a Stack Navigator in a Tab Navigator. So first, let’s install the package :

npm install @react-navigation/bottom-tabs

Now add a reference to that at the top, under where you referenced the Stack Navigator.

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

… and define the navigator, under your Stack definition.

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

Change your main App function to this, so that we have tabs as the main navigation:

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={Home} />
        <Tab.Screen name="Details" component={Details} />
        <Tab.Screen name="Search" component={Search} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Reload your app and you’ll see your new tabs at the bottom of the screen. Note I have added one extra page called Search. You can create a method for this in the same way as we did for the Home screen, and the Details screen. That is the Tab pages set up, now we need to continue to add a stackNavigator to one of the tab pages.

Building the StackNavigator

We will include a Stack of pages under the Details section, so create a new method called DetailsStackScreen, that will reference each page in our Stack, like this:

function DetailsStackScreen({navigation}){
  return (
      <Stack.Navigator>
        <Stack.Screen name="Details Stack Screen" component={Details} />
        <Stack.Screen name="Further Details" component={FurtherDetails} />
      </Stack.Navigator>
  );
}

You will notice we’ve referenced a new page – Further Details, so we need to also add the method for this:

function FurtherDetails({ navigation }) {
  return (
    <View style={styles.container}>
      <Text>This is the FURTHER Details page</Text>
      <Button
        title="Back to the previous Screen"
        onPress={() => navigation.goBack()}
      />
      <Button
        title="Back to the HOME Screen"
        onPress={() => navigation.navigate('Home')}
      />
    </View>
  );
}

And also we need to update our Details page to include a link to drill down to the Further Details page:

function Details({ navigation }) {
  return (
    <View style={styles.container}>
      <Text>This is the Details page. Now you can drill down to a further details page in this Stack of screens</Text>
      
      <Button
        title="Further Details"
        onPress={() => navigation.navigate('Further Details')}
      />

      <Button
        title="Back to the Home Screen"
        onPress={() => navigation.navigate('Home')}
      />
    </View>
  );
}

Finally, we need to update the main App method to reference the DetailsStackScreen instead of our original Details method :

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={Home} />
        <Tab.Screen name="Details" component={DetailsStackScreen} />
        <Tab.Screen name="Search" component={Search} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Now refresh your app to see the results, and you’ll see you have 3 tabs, each of which leads to a page. In the Details screen you will see that you can navigate through the Stack of pages you have defined.

The stack-navigator-in-tab-navigator branch in my git repo contains the code up to this point. See the link at the bottom of this post for access to the full source code for this example Expo app.

Expo drawer navigation – also known as side navigation

To complete our app, we will be adding some Expo Drawer navigation. To start we need to install the package :

npm install @react-navigation/drawer

… reference it at the top of our App.js page :

import { createDrawerNavigator } from '@react-navigation/drawer';

Then create the Drawer object :

const Drawer = createDrawerNavigator();

Now we make the main method in our App.js file reference the Drawer Navigator, which becomes the ‘wrapper’. This references each page you want to show in your side menu, like this:

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="HomeTabs" component={HomeTabsScreen} />
        <Drawer.Screen name="Settings" component={SettingsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

HomeTabScreen is a new method that we need to define, that holds the TabNavigator that used to be in this main method, like this :

function HomeTabsScreen({navigation}){
  return(
    <Tab.Navigator>
         <Tab.Screen name="Home" component={Home} />
         <Tab.Screen name="Details" component={DetailsStackScreen} />
         <Tab.Screen name="Search" component={Search} />
    </Tab.Navigator>
  );
}

Then we just need to define the SettingsScreen :

function SettingsScreen({ navigation }) {
  return (
    <View style={styles.container}>
      <Text>This is the Settings page</Text>
      <Button
        title="Back to the Home Screen"
        onPress={() => navigation.navigate('Home')}
      />
    </View>
  );
}

And finally we need to reference our styles at the bottom the page :

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

After installing DrawerNavigator in your Expo app you may get an error:

Requiring module "node_modules\react-native-reanimated\src\Animated.js", which threw an exception: Error: Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin?

To resolve this you have to add 'react-native-reanimated/plugin' to the babel.config.js file so the final code in there is like this:

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-reanimated/plugin'],
  };
};

Finally, run expo r -c to clear the cache.

If you now run your app, you will have a fully functioning app with all three types of navigation. Drag in the Drawer Navigation menu from the left hand side and try clicking each link. You’ll notice that the Settings page does not contain any Tab Navigation, but the Home page does, so you have total control over where and how you use each type of Expo Navigation.

Summary

If you’ve followed this Expo navigation example in full, your app is now ready for you to build your own pages and style! You’ve now learnt how to:

• Set up basic navigation (a Stack Navigator) using ReactNavigation
• Add Tab navigation to your Expo app, and combine it with the StackNavigator
• Add Drawer Navigation to the Expo app
• Apply some styling

Feel free to email me any questions or requests for the next post at emily@brainstormcreative.co.uk!

---

For completeness, the final code of this Expo React Navigation example app is in my GitHub repository – https://github.com/EmilyChristy/expo-navigation-example. Please remember to star my repo and follow me!

Related:

• Create a React Native app with Expo tutorial
• How to build a React Native Expo app on a PC
• How to run an Expo app on an Android emulator
• Flutter bottom navigation bar example