123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351 |
- ---
- id: installing
- title: Installation
- sidebar_label: Installation
- ---
-
- ## Requirements
- * node >= 8
- * react-native >= 0.51
-
- ## npm
- * `npm install --save react-native-navigation`
-
- ## Installing with `react-native link`
- If you're using RN 0.60 or higher, you can link RNN automatically with react-native link.
-
- Unlike most other libraries, react-native-navigation requires you to make a few changes to native files. To make all the necessary changes, run
-
- ```react-native link react-native-navigation```
-
- in your project's root folder. Make sure to commit the changes introduced by the link script.
-
- If the link script completed successfully, you're good to go! If one of the steps failed, you'll need to complete the relevant step in the manual installation steps bellow.
-
- ## Displaying the app root
-
- ### Update index.js file
- `index.js` is typically used as an entry point into the app. It's first parsed and executed by the JS engine, therefore we'll want to show our UI from there.
-
- The following diff demonstrates changes needed to be made to `index.js`, initialized by `react-native init`.
-
- ```diff
- +import { Navigation } from "react-native-navigation";
- -import {AppRegistry} from 'react-native';
- import App from "./App";
- -import {name as appName} from './app.json';
-
- -AppRegistry.registerComponent(appName, () => App);
- +Navigation.registerComponent('com.myApp.WelcomeScreen', () => App);
-
- +Navigation.events().registerAppLaunchedListener(() => {
- + Navigation.setRoot({
- + root: {
- + stack: {
- + children: [
- + {
- + component: {
- + name: 'com.myApp.WelcomeScreen'
- + }
- + }
- + ]
- + }
- + }
- + });
- +});
- ```
- ___
-
- ## Manual Installation
- If installation with react-native link did not work, follow the manual installation steps below.
-
- ### iOS
-
- > Make sure your Xcode is updated. We recommend editing `.h` and `.m` files in Xcode as the IDE will usually point out common errors.
-
- #### Installation with CocoaPods
-
- Projects generated using newer versions of react-native use CocoaPods by default. In that case it's easier to install react-native-navigation using CocoaPods.
-
- 1. Update your `Podfile`:
- **If you're upgrading to v5 from a previous RNN version**, make sure to remove manual linking of RNN
-
- ```diff
- platform :ios, '9.0'
- require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
-
- target 'YourApp' do
- # Pods for YourApp
- pod 'React', :path => '../node_modules/react-native/'
- pod 'React-Core', :path => '../node_modules/react-native/React'
- pod 'React-DevSupport', :path => '../node_modules/react-native/React'
- pod 'React-fishhook', :path => '../node_modules/react-native/Libraries/fishhook'
- pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
- pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
- pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
- pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
- pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
- pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
- pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
- pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
- pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
- pod 'React-RCTWebSocket', :path => '../node_modules/react-native/Libraries/WebSocket'
-
- pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'
- pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'
- pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'
- pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'
- pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
-
- pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
- pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
- pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
-
- - pod 'ReactNativeNavigation', :podspec => '../node_modules/react-native-navigation/ReactNativeNavigation.podspec'
-
- use_native_modules!
- end
- ```
-
- 2. `cd ios && pod install`
-
- #### Native Installation
-
- If all else fails, we can always try and install the hardcore way:
-
- 1. In Xcode, in Project Navigator (left pane), right-click on the `Libraries` > `Add files to [project name]`. Add `node_modules/react-native-navigation/lib/ios/ReactNativeNavigation.xcodeproj` ([screenshots](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#manual-linking)).
-
- 2. In Xcode, in Project Navigator (left pane), click on your project (top), then click on your *target* row (on the "project and targets list", which is on the left column of the right pane) and select the `Build Phases` tab (right pane). In the `Link Binary With Libraries` section add `libReactNativeNavigation.a` ([screenshots](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#step-2)).
-
- a. If you're seeing an error message in Xcode such as:
- ```
- 'ReactNativeNavigation/ReactNativeNavigation.h' file not found.
- ```
- You may also need to add a Header Search Path: ([screenshots](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#step-3)).
- ```objectivec
- $(SRCROOT)/../node_modules/react-native-navigation/lib/ios
- ```
-
- 3. In Xcode, you will need to edit this file: `AppDelegate.m`. This function is the main entry point for your app:
-
- ```objectivec
- - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { ... }
-
- ```
-
- Its content should look like this:
- ```objectivec
- #import "AppDelegate.h"
-
- #import <React/RCTBundleURLProvider.h>
- #import <React/RCTRootView.h>
- #import <ReactNativeNavigation/ReactNativeNavigation.h>
-
- @implementation AppDelegate
-
- -(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
- {
- NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
- [ReactNativeNavigation bootstrap:jsCodeLocation launchOptions:launchOptions];
-
- return YES;
- }
-
- @end
- ```
-
- a. If, in Xcode, you see the following error message in `AppDelegate.m` next to `#import "RCTBundleURLProvider.h"`:
- ```
- ! 'RCTBundleURLProvider.h' file not found
- ```
- This is because the `React` scheme is missing from your project. You can verify this by opening the `Product` menu and the `Scheme` submenu.
- To make the `React` scheme available to your project, run `npm install -g react-native-git-upgrade` followed by `react-native-git-upgrade`. Once this is done, you can click back to the menu in Xcode: `Product -> Scheme -> Manage Schemes`, then click '+' to add a new scheme. From the `Target` menu, select "React", and click the checkbox to make the scheme `shared`. This should make the error disappear.
-
- b. If, in Xcode, you see the following warning message in `AppDelegate.m` next to `#import "@implementation AppDelegate"`:
- ```
- Class 'AppDelegate' does not conform to protocol 'RCTBridgeDelegate'
- ```
- You can remove `RCTBridgeDelegate` from this file: `AppDelegate.h`:
- ```diff
- - #import <React/RCTBridgeDelegate.h>
- - @interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate>
- + @interface AppDelegate : UIResponder <UIApplicationDelegate>
- ...
- ```
-
- ### Android
-
- > Make sure your Android Studio installation is up to date. We recommend editing `gradle` and `java` files in Android Studio as the IDE will suggest fixes and point out errors, this way you avoid most common pitfalls.
-
- #### 1 Update `android/build.gradle`:
-
- ```diff
- buildscript {
- ext {
- - minSdkVersion = 16
- + minSdkVersion = 19 // Or higher
- compileSdkVersion = 26
- targetSdkVersion = 26
- supportLibVersion = "26.1.0"
- + RNNKotlinVersion = "1.3.61" // Or any version above 1.3.x
- + RNNKotlinStdlib = "kotlin-stdlib-jdk8"
- }
- repositories {
- google()
- jcenter()
- + mavenLocal()
- + mavenCentral()
- }
- dependencies {
- + classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.3.61" // Or whatever Kotlin version you've specified above
- + classpath 'com.android.tools.build:gradle:3.5.3' // Or higher
- - classpath 'com.android.tools.build:gradle:2.2.3'
- }
- }
-
- allprojects {
- repositories {
- + google()
- mavenLocal()
- jcenter()
- maven {
- // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
- url "$rootDir/../node_modules/react-native/android"
- }
- - maven {
- - url 'https://maven.google.com/'
- - name 'Google'
- - }
- + maven { url 'https://jitpack.io' }
- }
- }
- ```
- #### 2 Update `MainActivity.java`
-
- `MainActivity.java` should extend `com.reactnativenavigation.NavigationActivity` instead of `ReactActivity`.
-
- This file is located in `android/app/src/main/java/com/<yourproject>/MainActivity.java`.
-
- ```diff
- -import com.facebook.react.ReactActivity;
- +import com.reactnativenavigation.NavigationActivity;
-
- -public class MainActivity extends ReactActivity {
- +public class MainActivity extends NavigationActivity {
- - @Override
- - protected String getMainComponentName() {
- - return "yourproject";
- - }
- }
- ```
-
- If you have any **react-native** related methods, you can safely delete them.
-
- #### 3 Update `MainApplication.java`
-
- This file is located in `android/app/src/main/java/com/<yourproject>/MainApplication.java`.
-
- ```diff
- ...
- 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 com.reactnativenavigation.react.NavigationReactNativeHost;
-
- -public class MainApplication extends Application implements ReactApplication {
- +public class MainApplication extends NavigationApplication {
-
- private final ReactNativeHost mReactNativeHost =
- - new ReactNativeHost(this) {
- + new NavigationReactNativeHost(this) {
- @Override
- public boolean getUseDeveloperSupport() {
- return BuildConfig.DEBUG;
- }
-
- @Override
- protected List<ReactPackage> getPackages() {
- @SuppressWarnings("UnnecessaryLocalVariable")
- List<ReactPackage> packages = new PackageList(this).getPackages();
- // Packages that cannot be autolinked yet can be added manually here, for example:
- // packages.add(new MyReactNativePackage());
- return packages;
- }
-
- @Override
- protected String getJSMainModuleName() {
- return "index";
- }
- };
-
- @Override
- public ReactNativeHost getReactNativeHost() {
- return mReactNativeHost;
- }
-
- @Override
- public void onCreate() {
- super.onCreate();
- - SoLoader.init(this, /* native exopackage */ false);
- initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
- }
- }
- ```
-
- ### App root
-
- Now that you're done, don't forget to update the `index.js` file, as [shown above](#update-indexjs-file).
-
- ## Troubleshooting
- ### Build app with gradle command
- **prefered solution** - The RNN flavor you would like to build is specified in `app/build.gradle`. Therefore in order to compile only that flavor, instead of building your entire project using `./gradlew assembleDebug`, you should instruct gradle to build the app module: `./gradlew app:assembleDebug`. The easiest way is to add a package.json command to build and install your debug Android APK .
-
- ```
- "scripts": {
- ...
- "android": "cd ./android && ./gradlew app:assembleDebug && ./gradlew installDebug"
- }
- ```
-
- Now run `npm run android` to build your application
-
- ### Force the same support library version across all dependencies
- Some of your dependencies might require a different version of one of Google's support library packages. This results in compilation errors similar to this:
-
- ```
- FAILURE: Build failed with an exception.
-
- * What went wrong:
- Execution failed for task ':app:preDebugBuild'.
- > Android dependency 'com.android.support:design' has different version for the compile (25.4.0) and runtime (26.1.0) classpath. You should manually set the same version via DependencyResolution
- ```
-
- To resolve these conflicts, add the following to your `app/build.gradle`:
-
- ```groovy
- android {
- ...
- }
-
- configurations.all {
- resolutionStrategy.eachDependency { DependencyResolveDetails details ->
- def requested = details.requested
- if (requested.group == 'com.android.support' && requested.name != 'multidex') {
- details.useVersion "${rootProject.ext.supportLibVersion}"
- }
- }
- }
-
- dependencies {
- ...
- implementation 'com.android.support:design:25.4.0'
- implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
- }
-
- ```
|