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 “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 {

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
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: {

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();

// 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();

}

}

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();

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);

}

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.