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.
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.
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”
$(SRCROOT)/../node_modules/react-native-navigation/ios. Make sure to set it as “recursive”.
Now we need to modify the AppDelegate.m.
android/settings.gradle and add the following to it.
android/app/build.gradle, update the
compile project(':react-native-navigation'). You also want to update
buildToolsVersion, located in
Next modify MainActivity.java
We’ve also got to modify MainApplication.java.
Then add the following to the body of MainApplication.java
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 index.android.js with the following
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
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.
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!