npm install --save react-native-navigation@1
or
yarn add react-native-navigation@1
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.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 thedependencies { ... }
block, don't remove them
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.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";
}
}
Replace all the contents by the following
import App from './App';
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"
}
})