Get started with React Native Navigation
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
Read more...