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

);

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

}

}

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

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

}

}

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

mReactInstanceManager.showDevOptionsDialog();

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.

4

Certification

Follow us on Twitter

Whether a beginner or a pro, investing apps are a treat, and some top-notch names have made it to this article.
Are you interested? Give it a read!

https://t.co/XfiT9Knrc8

#investment #fintech #fintechsolutions #mobileappdevelopment #mobileappdevelopmentcompany #mobileapps

Prolonged use of #virtualcommunication platforms often creates a state of exhaustion that we commonly refer to as #virtualmeeting burnout.

If you are suffering from the same then check out the blog & learn some easy ways to combat this problem.

https://t.co/Js7MxHO98s

One of Techugo's proud creations is redefining luxurious air travel – BookMyJet! Chartering air-planes is now possible with an #app – without any intermediaries and waiting!

Read the following blog to know more about this exciting product!!

https://t.co/1i7ucjJBr7

#MobileApp

After helping a startup get closer to 1M installs on #PlayStore in just 6 months, #Techugo is continuing its initiative to help brands tap into the #appindustry with an authentic approach that resonates with the target audience. Connect with us to know more!

#successstrategy

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