React Native ~ Linking React Native Navigation - rohit120582sharma/Documentation GitHub Wiki

Installation

npm install react-native-navigation --save

References


Linking

Automatic

react-native link react-native-navigation

iOS Manually

  • In Xcode, in Project Navigator (left pane), right-click on the Libraries > Add files to [project name]. Add ./node_modules/react-native-navigation/ios/ReactNativeNavigation.xcodeproj


  • In Xcode, in Project Navigator (left pane), click on your project (top), then click on your target row and select the Build Phases tab (right pane). In the Link Binary With Libraries section add libReactNativeNavigation.a


  • In Xcode, in Project Navigator (left pane), click on your project (top), then click on your project row and select the Build Settings tab (right pane). In the Header Search Paths section add $(SRCROOT)/../node_modules/react-native-navigation/ios. Make sure on the right to mark this new path recursive


  • In Xcode, you will need to edit this file: AppDelegate.m

    Replace all of its code with this reference

    Replace @"index" with @"index.ios" if you are using index.ios.js as your entry point instead of index.js


Android Manually

  • Add the following in android/settings.gradle

    include ':react-native-navigation'
project(':react-native-navigation').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-navigation/android/app/')

  • Update project dependencies in android/app/build.gradle, leave the

     compileSdkVersion rootProject.ext.compileSdkVersion
 buildToolsVersion rootProject.ext.buildToolsVersion

    as it is, do NOT replace it with

     android {
 	compileSdkVersion 25
 	buildToolsVersion "25.0.1"
 	...
 }

    In the same file (android/app/build.gradle), add these dependencies

     dependencies {
 	implementation fileTree(dir: "libs", include: ["*.jar"])
 	implementation "com.android.support:appcompat-v7:23.0.1"
 	implementation "com.facebook.react:react-native:+"
 	implementation 'com.android.support:design:27.1.0'
 	implementation project(':react-native-navigation')
 }

    This line which was added is especially important:

     implementation 'com.android.support:design:27.1.0'

  • In android/app/src/main/java/com/<yourproject>/MainActivity.java

     import com.reactnativenavigation.controllers.SplashActivity;

 public class MainActivity extends SplashActivity {

 }

    If you have any react-native related methods, you can safely delete them.

  • In MainApplication.java, add the following

     import com.reactnativenavigation.bridge.NavigationApplication;

 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(
 			// eg. new VectorIconsPackage()
 		);
 	}

 	@Override
 	public List<ReactPackage> createAdditionalReactPackages() {
 		return getPackages();
 	}

 	@Override
 	public String getJSMainModuleName() {
 		return "index";
 	}
 }

    Make sure that isDebug and createAdditionalReactPackages methods are implemented.

  • Update AndroidManifest.xml and set android:name value to .MainApplication

     <application
 	android:name=".MainApplication"
 	...
 />

⚠️ **GitHub.com Fallback** ⚠️