- node >= 8
- react-native >= 0.51
If you're using RN 0.60 or higher, you can benefit from autolinking for some of the necessary installation steps. But unlike most other libraries, react-native-navigation requires you to make a few changes to native files.
We've simplified the process through a set of scripts. So to make all the necessary changes automatically, in your project's root folder run:
Make sure to commit the changes introduced by the
The automatic linking is optimized for new applications created via the
react-native initcommand. If you are migrating from a version of react-native-navigation older than v5, it's recommended to check the steps manually after the script runs.
If one of the steps failed or you can't run (or are not comfortable with) the automatic scripts, you'll need to complete the relevant steps in the manual installation steps below, for both platforms.
After the the automatic scripts completed successfully, run pod install:
index.js is typically used as an entry point into the app. It's first parsed and executed by the JS engine, therefore we'll want to show our UI from there.
The following diff demonstrates changes needed to be made to
index.js, initialized by
If you followed the steps successfully up to this point, then rebuild your application and you are good to go:
This is a good moment to build your application in both platforms, validate that everything is working properly and commit your changes. If you're coming from a fresh
react-native init project, then you should be seeing the Welcome screen as usual, but under the hood your application is using react-native-navigation!
If installation with
npx rnn-link did not work, follow the manual installation steps below.
Make sure your Xcode is updated. We recommend editing
.mfiles in Xcode as the IDE will usually point out common errors.
Projects generated using newer versions of react-native use CocoaPods by default. In that case it's easier to install react-native-navigation using CocoaPods.
- Update your
Podfile: If you're upgrading to v5 from a previous RNN version, make sure to remove manual linking of RNN
cd ios && pod install
If the React Native version in your project is above 0.60 and you are following the manual installation, skip to step 3.
If autolinking is not available in your project (RN version < 0.60), you can always try and install the hardcore way:
In Xcode, in Project Navigator (left pane), right-click on the
Add files to [project name]. Add
In Xcode, in Project Navigator (left pane), click on your project (top), then click on your target row (on the "project and targets list", which is on the left column of the right pane) and select the
Build Phasestab (right pane). In the
Link Binary With Librariessection add
a. If you're seeing an error message in Xcode such as:
You may also need to add a Header Search Path: (screenshots).
- In Xcode, you will need to edit this file:
AppDelegate.m. This function is the main entry point for your app:
Its content should look like this:
Make sure your Android Studio installation is up to date. We recommend editing
javafiles in Android Studio as the IDE will suggest fixes and point out errors, this way you avoid most common pitfalls.
MainActivity.java should extend
com.reactnativenavigation.NavigationActivity instead of
This file is located in
If you have any react-native related methods, you can safely delete them.
This file is located in
Now that you're done, don't forget to update the
index.js file, as shown above.
prefered solution - The RNN flavor you would like to build is specified in
app/build.gradle. Therefore in order to compile only that flavor, instead of building your entire project using
./gradlew assembleDebug, you should instruct gradle to build the app module:
./gradlew app:assembleDebug. The easiest way is to add a package.json command to build and install your debug Android APK .
npm run android to build your application
Some of your dependencies might require a different version of one of Google's support library packages. This results in compilation errors similar to this:
To resolve these conflicts, add the following to your