Logic square is a leading custom web & mobile app development company that offers its services to small businesses in the USA at an affordable cost.

Get Started with React Native Navigation

Get started with React Native Navigation

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


					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


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


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



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 {
  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(
  public List<ReactPackage> createAdditionalReactPackages() {
    return getPackages();
  public String getJSMainModuleName() {
    return "index";

2.5: Modify the content of

Replace all the contents by the following
					import App from './App';


2.6: Modify the content of



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);

  screen: {
    screen: "awesomeapp.AuthScreen",
    title: "login"



Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *