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.
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)
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).
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
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
Once completed, you will have the demo app waiting for us to build upon displayed 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!
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
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.
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.
navigation folder, create a new file called
MaterialTopTabNavigator.js and add the following code:
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!
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.
App.js , same as with our
DrawerNavigator and, for now, let’s replace our
MaterialTopTabNavigator with it in the
We now have a drawer navigator for our app, which you can access by swiping inwards from the left.
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
DrawerNavigator, rewrite as follows:
You can also remove
App.js since we are no longer using it there.
There we have it! Let’s go over what we learned today:
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.