Update Installing.md (#3727)

Target react-native 0.56 version
Fix `MainActivity.java` and `MainApplication.java` with a working solution

docs/docs/Installing.md

@@ -53,23 +53,19 @@
 include ':react-native-navigation'
 project(':react-native-navigation').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-navigation/lib/android/app/')
 ```
-## 2. Updating Gradle build files.
-
-> react-native-navigation supports multiple React Native versions. Target the React Native version required by your project by specifying the RNN build flavor you require.
-><br><br>Available options:
->
->* `reactNative51`: Support for React Native 0.51-0.54
->* `reactNative55`: Support for React Native 0.55
->* `reactNative56`: Support for React Native 0.56 and above
->
-><br>For example: To target React Native 0.56
-> <br><br>Replace the following line in step 2.2:<br>
->`missingDimensionStrategy "RNN.reactNativeVersion", "reactNative51"`
-><br>with:<br>
->`missingDimensionStrategy "RNN.reactNativeVersion", "reactNative56"`
-><br><br>Make a choice in step 2.3 to alter your Android run-command (**prefered**) or ignore the unused buildvariants in your root build.gradle file.
-
-### 2.1 Update `android/build.gradle`:
+
+### 2. Make sure you're using the new gradle plugin, edit `android/gradle/wrapper/gradle-wrapper.properties`
+
+```diff
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists
++distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.zip
+-distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.1-all.zip
+```
+
+### 3 Update `android/build.gradle`:
 
 ```diff
 buildscript {
@@ -78,6 +74,10 @@ buildscript {
 +        mavenLocal()
 +        mavenCentral()
 +        jcenter()
+-        maven {
+-            url 'https://maven.google.com/'
+-            name 'Google'
+-        }
 	}
 	dependencies {
 +        classpath 'com.android.tools.build:gradle:3.0.1'
@@ -89,142 +89,216 @@ allprojects {
 	repositories {
 +		google()
 +		mavenCentral()
-+		mavenLocal()
+		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' }
 	}
 }
 
+ext {
+-    buildToolsVersion = "26.0.3"
++    buildToolsVersion = "27.0.3"
+-    minSdkVersion = 16
++    minSdkVersion = 19
+    compileSdkVersion = 26
+    targetSdkVersion = 26
+    supportLibVersion = "26.1.0"
+}
+
 
 ```
 
-### 2.2 Update project dependencies in `android/app/build.gradle`.
+### 4 Update project dependencies in `android/app/build.gradle`.
 
-```groovy
+```diff
 android {
-	compileSdkVersion 25
-	buildToolsVersion "27.0.3"
-	
-	defaultConfig {
-		minSdkVersion 19
-		targetSdkVersion 25
-		missingDimensionStrategy "RNN.reactNativeVersion", "reactNative51" // <- See note above for further instruction regarding compatibility with other React Native versions
-	...
-	}
-
-	compileOptions {
-		sourceCompatibility JavaVersion.VERSION_1_8
-		targetCompatibility JavaVersion.VERSION_1_8
-	}
+    compileSdkVersion rootProject.ext.compileSdkVersion
+    buildToolsVersion rootProject.ext.buildToolsVersion
+
+    defaultConfig {
+        applicationId "com.yourproject"
+        minSdkVersion rootProject.ext.minSdkVersion
+        targetSdkVersion rootProject.ext.targetSdkVersion
+        versionCode 1
+        versionName "1.0"
+        ndk {
+            abiFilters "armeabi-v7a", "x86"
+        }
+    }
++	compileOptions {
++		sourceCompatibility JavaVersion.VERSION_1_8
++		targetCompatibility JavaVersion.VERSION_1_8
++	}
 	...
 }
 
 dependencies {
-	implementation fileTree(dir: "libs", include: ["*.jar"])
-	implementation "com.android.support:appcompat-v7:25.4.0"
-	implementation "com.facebook.react:react-native:+"
-	implementation project(':react-native-navigation')
+-    compile fileTree(dir: "libs", include: ["*.jar"])
+-    compile "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
+-    compile "com.facebook.react:react-native:+"  // From node_modules
++    implementation fileTree(dir: "libs", include: ["*.jar"])
++    implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
++    implementation "com.facebook.react:react-native:+"  // From node_modules
++    implementation project(':react-native-navigation')
 }
 ```
 
-### 2.3 Compiling the correct build flavor
-Now that you've specified the RNN flavor you need to compile acording to the installed React Native version, you need to ignore the other flavors RNN provides.
+### 5. Update `gradle.properties` and disable incremental resource processing
 
-1. **The preferable option**: Use the configuration specified in the `app` module. 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:asembleDebug`. The easiest way is to add a package.json command to build and install your debug Android APK since the RN-CLI run-android command will no longer be of use.
+```diff
++# Disable incremental resource processing as it broke release build
++android.enableAapt2=false
 ```
-"scripts": {
-  "run-android": "cd ./android && ./gradlew app:assembleDebug && ./gradlew installDebug"
+
+### 6. 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.
+
+### 7. Update `MainApplication.java`
 
-2. Alternatively, explicitly ignore unwanted flavors in your project's root `build.gradle`. (Note: As more build variants come available in the future, you will need to adjust this list. While this option lets you keep the CLI command ```react-native run-android``` it comes at a cost of future upkeep.)
+This file is located in `android/app/src/main/java/com/<yourproject>/MainApplication.java`.
+	
 ```diff
-+subprojects { subproject ->
-+    afterEvaluate {
-+        if ((subproject.plugins.hasPlugin('android') || subproject.plugins.hasPlugin('android-library'))) {
-+            android {
-+                variantFilter { variant ->
-+                    def names = variant.flavors*.name
-+                    if (names.contains("reactNative51") || names.contains("reactNative55")) { // <- See note above for further instruction regarding compatibility with other React Native versions
-+                        // Gradle ignores any variants that satisfy the conditions above.
-+                        setIgnore(true)
-+                    }
-+                }
+...
+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;
++import com.reactnativenavigation.react.ReactGateway;
+
+import java.util.Arrays;
+import java.util.List;
+
+-public class MainApplication extends Application implements ReactApplication {
++public class MainApplication extends NavigationApplication {
++    
++    @Override
++    protected ReactGateway createReactGateway() {
++        ReactNativeHost host = new NavigationReactNativeHost(this, isDebug(), createAdditionalReactPackages()) {
++            @Override
++            protected String getJSMainModuleName() {
++                return "index";
 +            }
-+        }
++        };
++        return new ReactGateway(this, isDebug(), host);
++    }
++
++    @Override
++    public boolean isDebug() {
++        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();
++    }
+- ...
 +}
-```
 
-### 3. Make sure you're using the new gradle plugin, edit `android/gradle/wrapper/gradle-wrapper.properties`
-
-```diff
-distributionBase=GRADLE_USER_HOME
-distributionPath=wrapper/dists
-zipStoreBase=GRADLE_USER_HOME
-zipStorePath=wrapper/dists
-+distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.zip
--distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.1-all.zip
 ```
 
-### 4. Update `gradle.properties` and disable incremental resource processing
+### 8 RNN and React Native version
+
+react-native-navigation supports multiple React Native versions. Target the React Native version required by your project by specifying the RNN build flavor in `app/build.gradle`.
 
 ```diff
-+# Disable incremental resource processing as it broke release build
-+android.enableAapt2=false
+android {
+    ...
+    defaultConfig {
+        applicationId "com.yourproject"
+        minSdkVersion rootProject.ext.minSdkVersion
+        targetSdkVersion rootProject.ext.targetSdkVersion
++        missingDimensionStrategy "RNN.reactNativeVersion", "reactNative56"
+        versionCode 1
+        versionName "1.0"
+        ...
+    }
+    ...
+}
 ```
 
-### 5. Update `MainActivity.java`
+RNN only support react-native 0.51 (`"reactNative51"`), 0.55 (`"reactNative55"`), and O.56 (`"reactNative56"`),
 
-`MainActivity.java` should extend `com.reactnativenavigation.NavigationActivity` instead of `ReactActivity`.
-
-This file can be located in `android/app/src/main/java/com/yourproject/`.
+Now we need to instruct gradle how to build that flavor. To do so here two solutions :
 
-```java
-import com.reactnativenavigation.NavigationActivity;
+#### 8.1 Build app with gradle command 
 
-public class MainActivity extends NavigationActivity {
+**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:asembleDebug`. 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"
 }
 ```
 
-If you have any **react-native** related methods, you can safely delete them.
+No run `npm run android` to build your application
 
-### 6. In `MainApplication.java`, add the following
-	
-```java
-import com.reactnativenavigation.NavigationApplication;
+#### 8.2 Ignore other RNN flavors
 
-public class MainApplication extends NavigationApplication {
-	@Override
-	public boolean isDebug() {
-		return BuildConfig.DEBUG;
-	}
+If you don't want to run `npm run android` and want to keep the default `react-native run-android` command, you need to specify to graddle to ignore the other flavors RNN provides.
 
-	@Override
-	public List<ReactPackage> createAdditionalReactPackages() {
-		return Arrays.<ReactPackage>asList(
-			// eg. new VectorIconsPackage()
-		);
-	}
-}
+To do so edit `android/build.gradle` and add:
+
+```diff
++subprojects { subproject ->
++    afterEvaluate {
++        if ((subproject.plugins.hasPlugin('android') || subproject.plugins.hasPlugin('android-library'))) {
++            android {
++                variantFilter { variant ->
++                    def names = variant.flavors*.name
++                    if (names.contains("reactNative51") || names.contains("reactNative55")) {
++                        setIgnore(true)
++                    }
++                }
++            }
++        }
++    }
++}
 ```
-Make sure that `isDebug` method is implemented.
 
-### 7. Update `AndroidManifest.xml` and set `application` **android:name** value to `.MainApplication`
+**Note**: As more build variants come available in the future, you will need to adjust the list (`names.contains("reactNative51") || names.contains("reactNative55")`). This is why we recommend the first solution.
 
-```xml
-<application
-    android:name=".MainApplication"
-    ...
-/>
-```
-### 8. Force the same support library version across all dependencies
+### 9. Force the same support library version across all dependencies (optional)
 
 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:
 
@@ -247,7 +321,7 @@ configurations.all {
     resolutionStrategy.eachDependency { DependencyResolveDetails details ->
         def requested = details.requested
         if (requested.group == 'com.android.support' && requested.name != 'multidex') {
-            details.useVersion "25.4.0" // <- Change this to whatever version you're using
+            details.useVersion "${rootProject.ext.supportLibVersion}"
         }
     }
 }
@@ -255,7 +329,31 @@ configurations.all {
 dependencies {
     ...
     implementation 'com.android.support:design:25.4.0'
-    implementation 'com.android.support:appcompat-v7:25.4.0'
+    implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
 }
 
-```
+```
+
+## You can use react-native-navigation \o/
+
+Update `index.js` file
+
+
+```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(`navigation.playground.WelcomeScreen`, () => App);
+
++Navigation.events().registerAppLaunchedListener(() => {
++  Navigation.setRoot({
++    root: {
++      component: {
++        name: "navigation.playground.WelcomeScreen"
++      }
++    }
++  });
++});