Integrating React Native into an Existing App (Android)

In my previous story i talked about integrating react native on iOS applications, now we're going to rush the missing piece of this post so we can finish this topic.

Same as the previous story, we'll need to have the following:

• Node, NPM and react-native-cli installed.
• A (new) React Native project.

This steps are already explained on my previous story.

If you run you react-native project, you'll see something like this:

That means that you have a react native application, that you'll treat as base to port your existing application, on your native application, you should move the project into an android folder, that means, if you project is called MyAwesomeNativeApp you should move your source code into MyAwesomeNativeApp/android

Later on, move all the react-native folders and file into your project, except for the android folder (and ios, if you had a native ios app), be careful of moving the hidden files too, those ones that starts with a dot.

Those are my files, but may vary between projects

After that, we had the environment ready, our app can receive the non-android assets.

From now, we're going to work on your native project, starting to port react-native into it.

Know the project name

In the future steps we’ll be refer to the “project name” on steps of the code, this is the name that the main component is registering, it could be found on the file index.android.js find a line that is calling the method registerComponent of AppRegistry like this:

AppRegistry.registerComponent(‘myAwesomeApplication’, 
() => myAwesomeApplication);

On this case, the first string is what we care about, since it told us that our project is called myAwesomeApplication

Setting Up Gradle

Same as the iOS guide, we'll start linking our libraries, but instead of adding .xcodeproj files, on android we do it using Gradle.

First, make sure that your sidebar view is on Project mode, because i'll be using it to show the routes of the files.

This is the dropdown that allow you to change the sidebar mode

The first file that we'll touch is android/build.gradle , you'll be seeing something like this:

We're going to focus on the allprojects block, you'll need to replace it with this:

allprojects {
    repositories {
        mavenLocal()
        jcenter()
        maven {
            url "$rootDir/../node_modules/react-native/android"
        }
    }
}

This will include the react native android on the native app.

Now, on android/settings.gradle we'll add at the top of the file this sentence:

rootProject.name = 'myAwesomeApplication'

And be sure of replace myAwesomeApplication with your real project name.

Head into android/app/build.gradle inside this file, we're going to look for the android block, it should have as children a defaultConfig block, inside of it, we'll put this lines:

ndk {
    abiFilters "armeabi-v7a", "x86"
}

Now, we're going to look for dependencies block, it should be a sibling of the android block, and we'll add this line:

compile "com.facebook.react:react-native:+"

And remove the line that starts with androidTestCompile

You should end up having something like this:

Finally, add the Buck task at the end of the file, copying this will work:

task copyDownloadableDepsToLibs(type: Copy) {
    from configurations.compile
    into 'libs'
}

Now, sync the project and everything should be fine without any kind of gradle error.

Adding MainApplication and the React Native Activity

Our next steps will be to create our required classes, starting with MainApplication.java , this should be created under android/app/src/main/java/<your.package.name> .

On this folder, we're going to create a new Java Class, simply by right-clicking on the folder with the name of your package, selecting new > Java Class:

There should be a popup asking for more information about this new class, that we should complete it like this:

We're going to inherit from Application and implement ReactApplication

Now, add this lines into our new file (don't replace the package statement, use your package name):

If any import popup opens just give it ok, make sure that there are no syntax errors and you'll be fine, this is the starting point of the react application, later we'll be referencing it into our manifest, so it's fine if for now it shows up as an unused class.

Again, we're going to create a new class, but this time we can give it the name that we want, on my case, i'll call it ReactMainActivity , again we follow the same procedure as above but we'll fill the popup with this information:

On this case, we inherit from ReactActivity

On this case, we're just going to implement this method:

Replace "myAwesomeApplication" with your project name

This is the starting point of our application, the activity that will start our react-native app.

Configuring the Android Manifest

We already set up the build phase and created the required classes, now is time to integrate those classes on the application.

Go to android/app/src/main/AndroidManifest.xml :

Inside the manifest tag put this permissions:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

This will do two things:

• Allow us to have internet Access, required for the debugger
• Allow us to overlay windows, also used by our lovely debugger

Now, inside the application tag put a new attribute called android:name of value .MainApplication

On the bottom of the application tag we're going to add the React Native Debugger Activity, simply pasting this tag:

<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

Now, we're going to add our new activity, this will be enough on this case:

Replace .ReactMainActivity with your activity class (starting with a dot), and "ReactActivity" with a label for your activity

You'll probably want to do some adjustments so here is a good place to look about the Manifest Configuration.

You'll end up having something like this:

This is for demo purposes, don't copy and paste on top of your Manifest because it will not work.

Launch Activity

On the point where we want to start our application (could be a touch press on a button, for example), we'll launch a new Activity (Based on a Intent, as usual on Android)

As Usual, replace ReactMainActivity with your class

On My Case, inside my activity i have this onClick method called when i click a button, so it will open a new activity with react native on in.

Launch Time!

Finally, start your packager with npm start or react-native start and, on android studio, hit the green play button to open a emulator, you'll see something like this:

On my previous story i didn't put what i thought about react-native, but i think that along with react, react-native is one of those pieces that changed the way to made apps, is currently happening and allow the same range of people to do more powerful things and not try to "Mimic" applications using a WebView, but it also allow us to dig inside of the low level of those platforms, so we can write on native what is really crucial and let react-native handle the rest. All that i had to say to the React Native engineering team is a big THANK YOU!