React Native

20 Nov 2020

How To Integrate Native Android App With React Native?

The popularity of React Native Technology cannot be contained. The growing inclination of the app industry towards this cross-platform technology has triggered the curiosity of many domains. Therefore, we need to learn more about related development concepts. So today, let us learn the way to integrate Native Android App with React Native!

Checkout Steps For React Native Integration With Native Android App!

If you are looking for an applicable solution to React Native integration with the android application, then we have an early Christmas gift for you. Here’s how you can do the same-

1# Environment setup-

  1. Install node
  2. Install watchman
  3. Install JDK Java8
  4. Install Android Studio
  5. Download and install SDK from android studio

2# Setup Directory Structure-

  1. Copy all existing android files to /android folder
  2. Create package.json file – {

“name”: “MyReactNativeApp”,

“version”: “0.0.1”,

“private”: true,

“scripts”: {

“start”: “yarn react-native start”



3# Open terminal in current directory & Install react native with – yarn add react-native, install yarn if not installed

4#. Add react native dependecies to app level build.gradle – dependencies {

implementation “”

implementation “com.facebook.react:react-native:+” // From node_modules

implementation “org.webkit:android-jsc:+”


5# Replace allprojects block in the top-level build.gradle with – allprojects {

repositories {

maven {

url “$rootDir/../node_modules/react-native/android”


maven {





6# Setup auto linking by adding – apply from: file(“../node_modules/@react-native-community/cli-platform-android/native_modules.gradle”); applyNativeModulesSettingsGradle(settings) to settings.gradle file

7# Add apply from: file(“../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle”); applyNativeModulesAppBuildGradle(project) in app/build.gradle

8# Define activity – <activity android:name=”com.facebook.react.devsupport.DevSettingsActivity” /> in AndroidManifest file

9# Apply the usesCleartextTraffic option to application tag in your AndroidManifest.xml

JS Code integration Steps

  1. Create an index.js file in root of project folder – index.js is the starting point for React Native applications, and it is always required. It can be a small file that requires other files that are part of your React Native component or application, or it can contain all the code that is needed for it. In our case, we will put everything in index.js
  2. Add to index.js file – import React from ‘react’;
    import {





} from ‘react-native’;

class HelloWorld extends React.Component {

render() {

return (

<View style={styles.container}>

<Text style={styles.hello}>Hello, World</Text>





var styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: ‘center’


hello: {

fontSize: 20,

textAlign: ‘center’,

margin: 10





() => HelloWorld


  1. In order to start the React Native runtime and tell it to render our JS componentCreate new as normal and add also don’t forget to import all dependencies & define this activity in manifest file — public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {

private ReactRootView mReactRootView;

private ReactInstanceManager mReactInstanceManager;


protected void onCreate(Bundle savedInstanceState) {


SoLoader.init(this, false);

mReactRootView = new ReactRootView(this);

List<ReactPackage> packages = new PackageList(getApplication()).getPackages();

// Packages that cannot be autolinked yet can be added manually here, for example:

// packages.add(new MyReactNativePackage());

// Remember to include them in `settings.gradle` and `app/build.gradle` too.

mReactInstanceManager = ReactInstanceManager.builder()









// The string here (e.g. “MyReactNativeApp”) has to match

// the string in AppRegistry.registerComponent() in index.js

mReactRootView.startReactApplication(mReactInstanceManager, “MyReactNativeApp”, null);




public void invokeDefaultOnBackPressed() {




  1. Perform Sync with gradle
  1. Add android:theme=”@style/Theme.AppCompat.Light.NoActionBar” to newly create activity class
  1. Pass in some lifecycle methods – @Override

protected void onPause() {


if (mReactInstanceManager != null) {





protected void onResume() {


if (mReactInstanceManager != null) {

mReactInstanceManager.onHostResume(this, this);




protected void onDestroy() {


if (mReactInstanceManager != null) {



if (mReactRootView != null) {





public void onBackPressed() {

if (mReactInstanceManager != null) {


} else {




  1. Finally, we need to hook up the dev menu with. – @Override

public boolean onKeyUp(int keyCode, KeyEvent event) {

if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {


return true;


return super.onKeyUp(keyCode, event);


  1. All steps have covered for integration
  1. Run the package manager with – npm start
  1. Run your android app with – react-native run-android

Top 5 Reasons Why You Must Choose React Native For Your Next App!

Apart from its fast and efficient mobility solutions, React Native has much more to offer. Take a look-

  • Allows developers to create applications faster.
  • The app’s performance is commendable.
  • All of the required resources are easily available.
  • Code can be shared across cross platforms.
  • Developers can use native code.

In A Nutshell

This is the entire technical process to integrate Native Android App with React Native. If you want to learn more about exciting development concepts then stay tuned to this space.

React Native mobile app development is emerging out to be an exciting opportunity for businesses. It not only offers pocket-friendly choices, but it also reduces the development time. If you want to upheave your revenue funnel then connect with our experienced professionals who can guide you in the right direction.

So what are you waiting for? Connect with us today and learn more about progressive opportunities in the app industry.



Follow us on Twitter

Artificial Intelligence and Manufacturing: What a tidal wave of innovation!

#ArtificiallIntelligence #ai #manufacturing #technology

Facebook is planning to change its company name next week to reflect its focus on building the metaverse.

#facebook #Metaverse #technews

Tech is working as an aid & obstacle in spreading awareness about sex.

It's thus crucial to discuss important aspects of reproductive health especially in present times.

Let's learn something salient then!

Click to read:

#sexeducation #algorithm #tech

Do you know what Reinforcement Learning is?

#MachineLearning #ReinforcementLearning #mondaythoughts #mondaymotivation

You have made this far!

How about a Coffee together!

Spill the beans – Share your idea

And get a blueprint of your product, for free!

A-26, Sector - 63, Noida, U.P, 201301
5885 Earlscourt Crescent Ottawa ON K4M 1K2
7760 Alyasmin Riyadh 13322 3224 Kingdom of Saudi Arabia
22375 Broderick Dr, Suite 225, Dulles VA 20166
Emaar Square, Boulevard Plaza Tower 1, Dubai

Why don't we start with your name?

Request your copy of Non Disclosure Agreement.

SiteMap | Privacy Policy

2020-2021 (c) Techugo

DMCA Certificate