Intro to React Navigation

An easy to use view controller for React Native

Sean Watters
Nov 4 · 3 min read
Photo by Alexander Andrews on Unsplash

The base of this example project has been built with the Expo CLI. For simplicity’s sake, we’re starting with the blank JavaScript template.

For any questions relating to the Expo CLI, please reference their excellently maintained documentation. I will also be posting about how/why to use Expo in the near future.


When you start your project and open the simulator (our project, will be using the iOS simulator for iPhone 11 Pro Max), you’ll see this:

This is the default view, with no bells or whistles. From here we can fully develop our own screens and navigation, from scratch.

To get started with React Navigation, we will need to install the additional dependencies that aren’t generated by the blank Expo template.

Run the following command in your main project directory:

Because this example is being done with a tab navigator, we also need to run the following command:


By default, your file tree should look like this:

We need to make some changes to this structure and add some directories and files to better organize the app. This will make it more readable and easier to manage as your application grows.


We will need to add three new folders under the main project directory.

project/
|- components/
|- navigation/
|- screens/

Your file tree should now look like this:

In the folder, we will create a component to be displayed within each of the screens. The file will look like this:

link to: GitHub gist

In the folder, we create two files: and .

link to: GitHub gist

The last two files we create are and in the folder.

First we will create the tab navigator in the file. Here we import the method from the React navigation tabs:

link to: GitHub gist

We create a switch navigator within the app container that will encompass our entire app. Additional routes, such as a login route could be added. By default, the switch navigator will first render the first route listed:

link to: GitHub gist

Finally in the file, update it’s contents with your App Navigator, instead of the default ‘Hello World’ text:

link to: GitHub gist

Your screen should now have two tabs and be navigable! The view on your simulator should look something like this:

Now that we have our main Tab Navigator set up, we have the ability to edit and style each view. I will delve deeper into customization and navigation types in future posts.

To see more than just the GitHub gists for this project (all of which are linked to below code examples), the full repository is here.

twittergithubwebsite

The Startup

Medium's largest active publication, followed by +542K people. Follow to join our community.

Sean Watters

Written by

software engineer seanwatters.io

The Startup

Medium's largest active publication, followed by +542K people. Follow to join our community.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade