Navigation is the backbone of every application! In any application, navigation plays a major role when it come to performance. Now there isn’t any single solution that fits all requirements. There are a number of navigation libraries out there for us to choose from. It’s also the same when it comes to React Native development. I have worked with most of the major navigation libraries available there and found React Native Navigation as the best fit. React Native Navigation as the name says uses the native modules with a JS bridge, which is making it the winner.

Here is a easy to follow step by step guide to configure the library in a React Native application.

1) Install the package

npm install --save react-native-navigation@1

or

yarn add react-native-navigation@1

2) Setup for Android

2.1: Add the following to the fileandroid/settings.gradle

Add the following at the end of the file

include ':react-native-navigation'project(':react-native-navigation').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-navigation/android/app/') 2.2: Modify the fileandroid/app/build.gradle

2.2.1 Replace all the lines starting with implementation inside the dependencies { … } block by the following

implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"implementation 'com.android.support:design:27.1.0' implementation "com.facebook.react:react-native:+" // From node_modules compile fileTree(dir: "libs", include: ["*.jar"])

2.2.2 Add the following compile command at the end of the dependencies { … } block

// compile project(':react-native-vector-icons') compile project(':react-native-navigation')

Warning: If there are already other compile project… commands inside the dependencies { … } block, don’t remove them