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! 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.

1. 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

2. 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 “com.android.support:appcompat-v7:27.1.1”
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 {

3. maven {
url “$rootDir/../node_modules/react-native/android”
}
maven {
url(“$rootDir/../node_modules/jsc-android/dist”)
}
}
}
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

4. 2. Add to index.js file – import React from ‘react’;
import {
AppRegistry,
StyleSheet,
Text,
View
} from ‘react-native’;
class HelloWorld extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.hello}>Hello, World</Text>
</View>
);
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center’
},
hello: {

5. fontSize: 20,
textAlign: ‘center’,
margin: 10
}
});
AppRegistry.registerComponent(
‘MyReactNativeApp’,
() => HelloWorld
);
3. In order to start the React Native runtime and tell it to render our JS
componentCreate new Activity.java 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;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
SoLoader.init(this, false);
mReactRootView = new ReactRootView(this);
List<ReactPackage> packages = new PackageList(getApplication()).getPackages();

6. // 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()
.setApplication(getApplication())
.setCurrentActivity(this)
.setBundleAssetName(“index.android.bundle”)
.setJSMainModulePath(“index”)
.addPackages(packages)
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
// The string here (e.g. “MyReactNativeApp”) has to match
// the string in AppRegistry.registerComponent() in index.js
mReactRootView.startReactApplication(mReactInstanceManager,
“MyReactNativeApp”, null);
setContentView(mReactRootView);
}
@Override
public void invokeDefaultOnBackPressed() {
super.onBackPressed();

7. }
}
4. Perform Sync with gradle
5. Add android:theme=”@style/Theme.AppCompat.Light.NoActionBar” to
newly create activity class
6. Pass in some lifecycle methods – @Override
protected void onPause() {
super.onPause();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostPause(this);
}
}
@Override
protected void onResume() {
super.onResume();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostResume(this, this);
}
}
@Override
protected void onDestroy() {
super.onDestroy();

8. if (mReactInstanceManager != null) {
mReactInstanceManager.onHostDestroy(this);
}
if (mReactRootView != null) {
mReactRootView.unmountReactApplication();
}
}
@Override
public void onBackPressed() {
if (mReactInstanceManager != null) {
mReactInstanceManager.onBackPressed();
} else {
super.onBackPressed();
}
}
7. 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) {
mReactInstanceManager.showDevOptionsDialog();
return true;
}
return super.onKeyUp(keyCode, event);

9. }
8. All steps have covered for integration
9. Run the package manager with – npm start
10.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.

10. Contact Us
Address :- A-26, Lohia Rd, A Block, Sector 63,
Noida, Uttar Pradesh 201301
Mobile No. :- 096671 34400
Mail Id :- sales@techugo.com
Website :- https://www.techugo.com/
***Thankyou***