react-native-navigation.md

Get started with React Native Navigation

Official doc link

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

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