Getting Started with React Native Navigation V1
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?
Installation
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.
iOS
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.
Android
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 MainActivity.java
We’ve also got to modify MainApplication.java.
Then add the following to the body of MainApplication.java
Usage
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
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.
Modal
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!
