Intro to React Navigation

An easy to use view controller for React Native

Sean Watters
Nov 4, 2019 · 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

Get smarter at building your thing. Join The Startup’s +794K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Sean Watters

Written by

Software Engineer — JavaScript, Rust, WebAssembly

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +794K followers.

Sean Watters

Written by

Software Engineer — JavaScript, Rust, WebAssembly

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +794K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store