Up and running with Expo, React Native, & React Navigation 5.0

avatar
Marshal Murphy
April 10, 2020 - 6 MIN READ

Keep your dependencies current.

This morning I woke up to find that the Expo SDK version I have been using for a side project is no longer supported. That is my fault. As a front end developer, I think about building beautiful UX & UI, and I quickly grow bored of talk around infrastructure. But I messed up by allowing my expo version to fall many, many major app-breaking versions behind.

So, I began to work through upgrading the SDK, it’s dependencies, those dependencies’ dependencies… ad nauseam. When really, all I needed was to re-lay the foundation around React Navigation 5.0.

Feature

Thankfully this side project of mine is small (~10 screens), so I opted to start a fresh project, get the new navigation sorted out, and then go page by page, moving my UI into this fresh app.

Today, let us quickly go through the process of spinning up a fresh React Native app, using Expo with React Navigation 5.0. Our app will have a MaterialTopTabNavigator that allows the user to swipe between screens, with a DrawerNavigator to provide access to other screens. (Here’s the final project if you’re in a rush: Project Repo)

In-Place String Reversals


Node

Alright so first off, we got to get rollin’ with Expo CLI. This is the command line interface that’ll do all of the heavy lifting for us. Expo CLI requires Node, so let’s start there. Download and install the most recent version of Node (that is recommended for most users).

Expo

With Node at our disposal, let’s get Expo installed. What is Expo, you ask? Well, Expo will create the app infrastructure for you, and allow you to immediately run it on your phone. There is no need for heavy android or iOS emulators, which is great for me, since I’m using a 4-year-old storage-deficient MacBook Air.

I can develop apps using my phone! Let’s get that going:

Install the Expo CLI globally.

npm install expo-cli — global

You will be asked to choose an installation option.

? Choose a template: (Use arrow keys)
 — — — Managed workflow — — -
❯ blank a minimal app as clean as an empty canvas
 blank (TypeScript) same as blank but with TypeScript configuration
 tabs several example screens and tabs using react-navigation
 — — — Bare workflow — — -
 minimal bare and minimal, just the essentials to get you started
 minimal (TypeScript) same as minimal but with TypeScript configuration

Let’s let Expo lay the groundwork for the navigation setup. Choose the tabs option and wait for the installation process to complete.

✨ Done in 30.46s.

Success! Now cd into your project folder expo-rn and launch the app!

cd expo-rn
yarn start

Launch the App

Expo QR

Running yarn start (or npm start or expo start) will generate a QR code in both your terminal and a browser window. To view our app, we will need to install the Expo app on our phone. Go to the Google Play (Expo) or App Store (Expo Client) and install the app.

With the Expo app installed on your phone, open it and select Scan QR Code. This will trigger the app to build a javascript bundle. You will see this progress on your phone, in the browser tab, and in the terminal.

Expo QR

Once completed, you will have the demo app waiting for us to build upon displayed on your phone.

Expo Starter


What have we covered so far?

  • Installed Node globally.
  • Installed Expo CLI globally.
  • Initialized a project with default navigation using Expo CLI.
  • Downloaded the Expo app to your phone.
  • Launched our project on your phone.

Choose Your Own Adventure: This is a great point to stop if you want to build something else. Otherwise, continue on to build out the navigation!


React Navigation 5.0

Now it’s time to get our hands dirty. Go ahead and open your project in your favourite editor.

Since we initialized this app with the tabs option, expo created an app with a bottom tab bar using react navigation 5. Cool. But what we want is to implement MaterialTopTabBar, as well as a Drawer Navigator.

Let’s start with the top tab bar. First off, let’s remove the current top bar that says How to get started or Links to learn more. In App.js , add the parameter headerMode="none" to stack navigator:

Beautiful, no more Top Bar!

Now let’s build our MaterialTopTabNavigator.


MaterialTopTabNavigator

If you look at the docs for React Navigation, you can search and explore createMaterialTopTabNavigator to get a sense of what we about to implement. But first thing’s first, we need to install some dependencies.

npm install @react-navigation/material-top-tabs react-native-tab-view react-native-reanimated

Follow this up with a general install of the project dependencies in package.json.

npm install

Interestingly, I get an error that the font isn’t loading. This error started happening after the release of Expo SDK 36. Why? Well, that is outside the scope of this project 😉. Here’s an easy fix:

expo install expo-font

Great, no more font error!

Now with our dependencies sorted out, let’s build this thing.

In the navigation folder, create a new file called MaterialTopTabNavigator.js and add the following code:

Then in App.js let’s import this navigator and replace the BottomTabNavigator in the Stack.Navigator with it.

Save the file and just like that, we can swipe between our screens!

MaterialTopTabNavigator


Drawer Nav

Now let’s implement a drawer navigator. If unfamiliar with this term, take a look at the docs and you’ll immediately recognize this type of navigation.

In the project root, add the drawer nav dependency.

npm install @react-navigation/drawer

Now, in the navigation folder create a new file called DrawerNavigator.js and add the following code to that file.

Then in App.js , same as with our MaterialTopTabNavigator, import DrawerNavigator and, for now, let’s replace our MaterialTopTabNavigator with it in the Stack.Navigator.

We now have a drawer navigator for our app, which you can access by swiping inwards from the left.

DrawerNavigator


Dual Navigators!

At this point we have created a MaterialTopTabNavigator and a DrawerNavigator, and we have implemented each individually. Now let’s combine the two!

To do this, we simply need to make the DrawerNavigator render our MaterialTopTabNavigator.

In the DrawerNavigator, rewrite as follows:

You can also remove MaterialTopTabNavigator from App.js since we are no longer using it there.

Dual Navs


There we have it! Let’s go over what we learned today:

  • Installed Node.js and ExpoCLI on our machines, and Expo to our mobile devices.
  • Used ExpoCLI to generate a basic app for use with React Navigation 5.0.
  • Removed the bottom tab bar in favour of a swipe-able top tab navigator.
  • Nested this top tab navigator inside a drawer navigator.

You did well! Here is the Project Repo again if you’d like to pull it down.

Now go and use this foundation to build something awesome.

Marshal Murphy 2020