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

				
					android/settings.gradle

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

POWER UP YOUR BUSINESS WITH REACT JS

Related Post

First Vue Native App

Introduction Vue Native is a mobile application development framework to build native mobile app using Vue.js.

Leave a Reply

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