How to integrate React Native into an existing Android app

So, you love React & React Native for their awesomeness. You have an existing Android app and you’d like to utilize React Native. However, you use the docs, but somehow you’re running into an exception, the app crashes etc. I have good news for you, this article should help you! :)

Note: I’m using React Native version 0.30. I’m also assuming you have at least a littble bit of experience building Android apps and know how to use the command line.

I’m assuming you’ve already downloaded your favorite starter kit, ran npm install and finished any other required steps. Also, you have an existing Android project. As a result, you have two folders somewhere on your disk: react-starter containing the index.android.js file, and android-project containing your package source files, gradlew and other files.

Preparing the project

Great! Now you just have to do the following:

1. Delete all contents of the android folder in the react-starter folder (or create an empty one if it doesn’t exist).
2. Take contents of the android-project folder and copy them over to the android folder from the previous step.

Next, open up Android Studio from within the react-starter/android folder, and create new Activity according to the docs (make sure you copy all 4 code snippets). After that, the following steps are crucial:

1. Replace Activity by AppCompatActivity
2. Replace the “HelloWorld” string with the one in your index.android.js file (it’s the first argument to the AppRegistry.registerComponent() method)
3. Add .setUseOldBridge(true) after the .setInitialLifecycleState(LifecycleState.RESUMED) line
4. Add the react-native dependency into into your package’s Gradle file:

dependencies {
    ...
    compile "com.facebook.react:react-native:0.30.0"
}

5. Go to your project’s Gradle file and add the maven repository under allprojects/repositories:

allprojects {
    repositories {
        ...
        maven {
            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.30.0" errors after running Gradle sync.

6. Use Alt+Enter to add all missing imports in your React Native Activity class. Be careful to use your package’s BuildConfig and not the one from facebook.

7. Use Android Studio to create a debug build as usual

Running debug build

If you carefully finished all the previous steps, you should be ready to run the project in debug mode! Just be sure you can start the newly-created Activity (create a button to launch it etc.). Spin up your favorite emulator or plug in your developer device and deploy the app to the device. Don’t forget to start the React Native Packager as usual:

$ react-native start

If you’re using a real device, don’t forget to use adb reverse tcp:8081 tcp:8081 too, to make the Packager accessible from your device.

After starting the React Native Activity, it should automatically connect to the Packager and download the bundle. Be patient, this can take a minute.

Creating production build

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!

Happy coding! :)