Image for post
Image for post

Getting Started with React Native Navigation V1

Spencer Carli
May 3, 2017 · 4 min read

There are quite a few options out there for Navigation in React Native. I typically default to React Navigation (tutorial on getting started) but that’s a Javascript based routing solution. This might not work for some people and others may just prefer a native option.

When React Native was first released the only navigation solution was NavigatorIOS, but it’s no longer being maintained and it only worked on iOS. Airbnb has native navigation, but it’s still very new.

That’s where React Native Navigation comes in — it uses native navigators on iOS and Android and has an easy to use Javascript API. I’ve never used it before but thought I would share my experiences getting up and running with it.

The final code is available on Github.

This tutorial applies to V1 of React Native Navigation. If you’re using V2 the API may have changed.

Prefer Video?


To get started I’ll create a new React Native project react-native init GettingStartedReactNativeNav. I’m then going to scaffold the application with a few screens, which you can find here.

Then install the package npm install --save react-native-navigation.


If anything doesn’t work/make sense please check the official documentation.

Open the project in Xcode open ios/GettingStartedReactNativeNav.xcodeproj/. Then, since this uses native libraries, you need to link the native dependencies. First right click on “Libraries” in the project navigator and click “Add files to GettingStartedReactNativeNav…”

And select ReactNativeNavigation.xcodeproj, which can be found at node_modules/react-native-navigation/ios/ReactNativeNavigation.xcodeproj.

Now in the “Build Phases” tab (visible in top navbar of Xcode) in the “Link Binary with Libraries” tab add libReactNativeNavigation.a.

Next go to the “Build Settings” tab and search for “Header Search Paths”

and add $(SRCROOT)/../node_modules/react-native-navigation/ios. Make sure to set it as “recursive”.

Now we need to modify the AppDelegate.m.


Open up android/settings.gradle and add the following to it.

Then, in android/app/build.gradle, update the dependencies with compile project(':react-native-navigation'). You also want to update compileSdkVersion and buildToolsVersion, located in android.

Next modify

We’ve also got to modify

Then add the following to the body of


React Native Navigation changes a bit of how React Native works (as you can tell by the installation). The biggest difference is how we register the application. We no longer use AppRegistry.registerComponent so we’ll swap out the index.ios.js and with the following

Then in app/index.js we’ll create our function that actually registers the application.

The first thing we want to do in that function is register our screens with React Native Navigation. We’ll do that via Navigation.registerComponent.

With that we can use our newly registered screens with the app. We’re going to set up a tab based app in this tutorial — which we do via Navigation.startTabBasedApp. Inside of that config we can pass a “tabs” array which represents the tabs of our application. All of the keys are pretty self explanatory so I won’t cover them. Full documentation is available here. The only thing I’ll note is that screen must align with a screen we registered previously.

Note: I’ve added a few images to the app. You can get those in the Github repo.

That leaves you with

Navigating Between Screens

To push a new screen onto the stack is very simple. In screens that were registered with Navigation you have access to this.props.navigation on which you simply want to “push” a new screen to it.


Opening a modal is as easy as pushing a new screen onto the stack.

In Conclusion

I’ve just scratched the surface of React Native Navigation and I’m excited to learn more about it. There are certainly benefits to going the native route, though installation can be a pain. I’m interested to see how flexible it is and what kind of interactions we can use with it. Until next time!

Did you enjoy this tutorial? Make sure to recommend it and if you’re interested in seeing more be sure to sign up for my email list!

Handlebar Labs

Building React Native & Meteor apps and teaching others how…

Spencer Carli

Written by

Student. Teacher. Pizza fiend. I write about React Native, Meteor, and more.

Handlebar Labs

Building React Native & Meteor apps and teaching others how to do the same.

Spencer Carli

Written by

Student. Teacher. Pizza fiend. I write about React Native, Meteor, and more.

Handlebar Labs

Building React Native & Meteor apps and teaching others how to do the same.

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