React Native Integrating with an existing native app (Android)

In this article we will learn about how to integrate React-Native to an existing android app. This tutorial is made under the following environment

react-native-cli: 2.0.1
react-native: 0.50.3

As changing of version in react-native there me be some breaking changes but still flow of integration will be same.

Lets create a new react native project using react-native-cli,

react-native init myReactApp

then go to root project of your android app and create a folder named reactNativeSrc, (This is not monetary but it keep react native code isolated from native code)

Now add a package.json file into root of the native android project then add following lines

“name”: “myApp”,
“version”: “0.0.1”,
“private”: true,
“scripts”: {
“start”: “node node_modules/react-native/local-cli/cli.js start”
“dependencies”: {
“react”: “16.0.0”,
“react-native”: “0.50.4”

Then copy all of your react native project except ios , android and node_modules in to the reactNativeSrc directory.

Android File Structure

Note : android minimum sdk version ≥16

Now follow this steps :

Now open which is located at project root directory myProj/build.gradle and in then all project block add following line.

allprojects {
repositories {

maven {
// All of React Native (JS, Android binaries) is installed from npm
url “$rootDir/node_modules/react-native/android”


Now open which is located at project directory myProj/app/build.gradle and in then all project block add following line.

compile ‘’
compile “com.facebook.react:react-native:+”

Now run gradle sync it should be run without any error now.

Now add a index.js file on to the root of the project directory then put the following code.

import React from 'react';
import {
} from 'react-native';
class HelloUser extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.hello}>Hey! How are you?</Text>
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
hello: {
fontSize: 20,
textAlign: 'center',
margin: 10,
AppRegistry.registerComponent('myApp', () => HelloUser);

Let’s do some native codding

Now create a activity select myapp.pacakeg→ file→ new→ javaclass
Name it MyReactActivityand add the following code.

package com.ranvir.applicationint;
import android.os.Bundle;
import android.view.KeyEvent;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactRootView;
import com.facebook.react.common.LifecycleState;
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;

public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {
private ReactRootView mReactRootView;
private ReactInstanceManager mReactInstanceManager;
protected void onCreate(Bundle savedInstanceState) {
 mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.addPackage(new MainReactPackage())
mReactRootView.startReactApplication(mReactInstanceManager, "myApp", null);
public void invokeDefaultOnBackPressed() {
protected void onPause() {
 if (mReactInstanceManager != null) {
protected void onResume() {
 if (mReactInstanceManager != null) {
protected void onDestroy() {
 if (mReactInstanceManager != null) {
public void onBackPressed() {
if (mReactInstanceManager != null) {
} else {
public boolean onKeyUp(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
return true;
return super.onKeyUp(keyCode, event);

Now add to Manifest.xml


Now add overlay permission check to the react native app add following code to, It is necessary for development only.

package com.ranvir.applicationint;import;import android.content.Intent;import;import android.os.Build;import android.provider.Settings;import;import android.os.Bundle;import android.util.Log;import android.view.View;import android.widget.Button;import com.facebook.react.*;import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;import;public class MainActivity extends AppCompatActivity implements View.OnClickListener {
 Button myButton; public static int OVERLAY_PERMISSION_REQ_CODE = 2; @Override protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); myButton = (Button) findViewById(; myButton.setOnClickListener(this); if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
if (!Settings.canDrawOverlays(this)) {
Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION, Uri.parse("package:" + getPackageName())); startActivityForResult(intent, OVERLAY_PERMISSION_REQ_CODE); }
 @Override public void onClick(View view) {
//Log.i("Test","Hello World"); Intent intent = new Intent(this, MyReactActivity.class); startActivity(intent); }
 @Override protected void onActivityResult(int requestCode, int resultCode, Intent data) {
if (!Settings.canDrawOverlays(this)) {
// SYSTEM_ALERT_WINDOW permission not granted... }
Final output will look like this.

Some extra, you need to add a button to invoke react-native module onClick, after this when you click on this button it will open a new intent in native app.

Originally published at on January 1, 2018.