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

				
					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

Replace all the contents by the following

				
					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"
  }
})