From 6cf7900030da96ba8f84ed6644fd258b32ac3717 Mon Sep 17 00:00:00 2001
From: Honza Kalfus <jankalfus@users.noreply.github.com>
Date: Tue, 30 Aug 2016 03:40:35 -0700
Subject: [PATCH] Updated integration with existing apps for Android

Summary:
I updated the integration with existing apps guide for Android with more recent info based on my article: https://medium.com/jankalfus/how-to-integrate-react-native-into-an-existing-android-app-c8b93b881632#.1o1vouxbn

Somebody please check the grammar etc., I'm not a native speaker.

Ping satya164.
Closes https://github.com/facebook/react-native/pull/9644

Differential Revision: D3790845

fbshipit-source-id: c653f1aa8f92e09fa2bf1e9d50497ef7918d1d1d
---
 docs/IntegrationWithExistingApps.md | 41 +++++++++++++++++++++++++----
 1 file changed, 36 insertions(+), 5 deletions(-)

diff --git a/docs/IntegrationWithExistingApps.md b/docs/IntegrationWithExistingApps.md
index 7ac932611..c034ae98e 100644
--- a/docs/IntegrationWithExistingApps.md
+++ b/docs/IntegrationWithExistingApps.md
@@ -573,8 +573,14 @@ AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
 ## Prepare your current app
 
 In your app's `build.gradle` file add the React Native dependency:
+```
+dependencies {
+    ...
+    compile "com.facebook.react:react-native:+" // From node_modules.
+}
+```
 
-    compile "com.facebook.react:react-native:+"  // From node_modules
+> If you want to ensure that you are always using a specific React Native version in your native build, replace `+` with an actual React Native version you've downloaded from `npm`.
 
 In your project's `build.gradle` file add an entry for the local React Native maven directory:
 
@@ -584,13 +590,15 @@ allprojects {
         ...
         maven {
             // All of React Native (JS, Android binaries) is installed from npm
-            url "$rootDir/node_modules/react-native/android"
+            url "$rootDir/../node_modules/react-native/android"
         }
     }
     ...
 }
 ```
 
+> Make sure that the path is correct! You shouldn’t run into any “Failed to resolve: com.facebook.react:react-native:0.x.x" errors after running Gradle sync in Android Studio.
+
 Next, make sure you have the Internet permission in your `AndroidManifest.xml`:
 
     <uses-permission android:name="android.permission.INTERNET" />
@@ -601,6 +609,10 @@ This is only really used in dev mode when reloading JavaScript from the developm
 
 You need to add some native code in order to start the React Native runtime and get it to render something. To do this, we're going to create an `Activity` that creates a `ReactRootView`, starts a React application inside it and sets it as the main content view.
 
+> If you are targetting Android version <5, use the `AppCompatActivity` class from the `com.android.support:appcompat` package instead of `Activity`.
+
+> If you find out later that your app crashes due to `Didn't find class "com.facebook.jni.IteratorHelper"` exception, uncomment the `setUseOldBridge` line. [See related issue on GitHub.](https://github.com/facebook/react-native/issues/8701)
+
 ```java
 public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {
     private ReactRootView mReactRootView;
@@ -618,6 +630,7 @@ public class MyReactActivity extends Activity implements DefaultHardwareBackBtnH
                 .addPackage(new MainReactPackage())
                 .setUseDeveloperSupport(BuildConfig.DEBUG)
                 .setInitialLifecycleState(LifecycleState.RESUMED)
+                //.setUseOldBridge(true) // uncomment this line if your app crashes
                 .build();
         mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorld", null);
 
@@ -630,7 +643,11 @@ public class MyReactActivity extends Activity implements DefaultHardwareBackBtnH
     }
 }
 ```
-We need set the theme of `MyReactActivity` to `Theme.AppCompat.Light.NoActionBar` beause some components rely on this theme.
+> If you are using a starter kit for React Native, replace the "HelloWorld" string with the one in your index.android.js file (it’s the first argument to the `AppRegistry.registerComponent()` method).
+
+If you are using Android Studio, use `Alt + Enter` to add all missing imports in your MyReactActivity class. Be careful to use your package’s `BuildConfig` and not the one from the `...facebook...` package.
+
+We need set the theme of `MyReactActivity` to `Theme.AppCompat.Light.NoActionBar` because some components rely on this theme.
 ```xml
 <activity
   android:name=".MyReactActivity"
@@ -689,7 +706,7 @@ We also need to pass back button events to React Native:
 
 This allows JavaScript to control what happens when the user presses the hardware back button (e.g. to implement navigation). When JavaScript doesn't handle a back press, your `invokeDefaultOnBackPressed` method will be called. By default this simply finishes your `Activity`.
 
-Finally, we need to hook up the dev menu. By default, this is activated by (rage) shaking the device, but this is not very useful in emulators. So we make it show when you press the hardware menu button:
+Finally, we need to hook up the dev menu. By default, this is activated by (rage) shaking the device, but this is not very useful in emulators. So we make it show when you press the hardware menu button (use `Ctrl + M` if you're using Android Studio emulator):
 
 ```java
 @Override
@@ -710,7 +727,11 @@ To run your app, you need to first start the development server. To do this, sim
 
     $ npm start
 
-Now build and run your Android app as normal (e.g. `./gradlew installDebug`). Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:
+Now build and run your Android app as normal (`./gradlew installDebug` from command-line; in Android Studio just create debug build as usual).
+
+> If you are using Android Studio for your builds and not the Gradle Wrapper directly, make sure you install [watchman](https://facebook.github.io/watchman/) before running `npm start`. It will prevent the packager from crashing due to conflicts between Android Studio and the React Native packager.
+
+Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:
 
 ![Screenshot](img/EmbeddedAppAndroid.png)
 
@@ -782,3 +803,13 @@ if (!foundHash) {
   display('platform', isMac ? 'objc' : 'android');
 }
 </script>
+
+## Creating a release build in Android Studio
+
+You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which’ll be included with your native Android app:
+
+    $ react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
+
+Don’t forget to replace the paths with correct ones and create the assets folder if it doesn’t exist!
+
+Now just create a release build of your native app from within Android Studio as usual and you should be good to go!