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 file
android/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 file
android/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
2.3: Modify the file
android/app/src/main/java/.../MainActivity.java
Replace all the contents by the following
package YOUR_PACKAGE_NAME; // You can leave your file default here
import com.facebook.react.ReactActivity;
import com.reactnativenavigation.controllers.SplashActivity;
public class MainActivity extends SplashActivity {
}
2.4: Modify the file
android/app/src/main/java/.../MainApplication.java
2.4.1: Replace the content of the file by following but don’t remove other 3rd party plugin’s import statements and configurations inside getPackages()
For example if VectorIconPackage is already installed keep it like below
package YOUR_PACKAGE_NAME; // You can leave your file default here
import android.app.Application;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
import com.reactnativenavigation.NavigationApplication;
import java.util.Arrays;
import java.util.List;
public class MainApplication extends NavigationApplication {
@Override
public boolean isDebug() {
// Make sure you are using BuildConfig from your own application
return BuildConfig.DEBUG;
}
protected List<ReactPackage> getPackages() {
// Add additional packages you require here
// No need to add RnnPackage and MainReactPackage
return Arrays.<ReactPackage>asList(
);
}
@Override
public List<ReactPackage> createAdditionalReactPackages() {
return getPackages();
}
@Override
public String getJSMainModuleName() {
return "index";
}
}
2.5: Modify the content of
index.js
import App from './App';
2.6: Modify the content of
app.js
Now we need to create screens (can also be referred as pages). Screens are nothing but normal react-native components.
Replace all the contents by the following
Here we are working with AuthScreen in the following example
import { Navigation } from "react-native-navigation";
import AuthScreen from "./screens/Auth";
Navigation.registerComponent("awesomeapp.AuthScreen", () => AuthScreen);
Navigation.startSingleScreenApp({
screen: {
screen: "awesomeapp.AuthScreen",
title: "login"
}
})
