How to Integrate React Native into an Existing Android App?

React Native is an excellent solution for cross-platform app development. However, when the process of building a native mobile application is finished many programmers experience difficulties in adding react native to an existing Android app. In this article, you will learn how to easily integrate this technology in 3 simple steps.

The history of React Native (RN) began in 2013 when it was introduced as a part of one of the Facebook’s Hackathon internal projects. In two years, it was first presented during the React.js Conference. From then on, RN became one of the most popular open-source solutions for app development. Google Trends show that the interest in this framework is constantly growing and it is almost twice higher than that of iOS or Android development.

Such world-famous apps as Instagram, Facebook Messenger, and Groupon use React Native. It is therefore no surprise that many developers strive to implement RN even in existing native apps. In order to add react native to an existing android application and make it right, you have to understand its working principle.

What Is React Native?

React Native is a framework that utilizes the JavaScript syntax and React Platform to connect the host platform and the JS syntax. Simply put, this Facebook’s project allows a developer to create apps for both iOS and Android using only JavaScript. Programmers do not have to change the syntax, language, or framework.

They just code in JS and RN will do all the rest. iOS apps are coded in Swift and Objective-C, Android uses Java, but RN uses JS to bridge the gaps between platforms and simplify development process when cross-platform support is needed. RN does the same thing for app development as English does for international communication: it implements the third solution that will be comprehensive for everybody.

What Is the Difference Between React Native and React JS?

RN is a framework while React JS is a JS library that is used for websites. When starting a project with React JS one need to choose a bundler to determine necessary bundling modules. In RN, everything is complete and there is no need for more. It does not use HTML to render apps and utilize alternative components that function similarly and build native UI components rendered on Android or iOS apps. For styling, RN uses JavaScript instead of traditional CSS. For this purpose, RN provides the Animated API that allows to create any animations and gestures.

How Does React Native Work?

Understanding of RN’s working principle is crucial for successful integration of React Native to existing Android project. Usual React uses Virtual DOM (Document Object Model) that is a specific way of structured document representation. Virtual DOM can be considered as a layer between the code and an actual content view.

RN simplifies the process of the whole content rendering. It memorizes changes made and renders them using a minimum of resources. Simply put, it looks like some advanced caching. Such working principle allows to load content faster while ensuring a higher performance.

How to Integrate React Native into Your Existing Application

Before starting an integration process, you need to download a React starter and run the “npm install”. Taking into account the fact that you have already got an Android project on your computer, you will have two folders we are going to work with: “React-Starter” and the one with your existing project.

The following files will be needed:

  • “React-Starter/index.android.js”;
  • “Android-Project/package.json”;
  • “Android-Project/build.gradle”.

Now you can proceed to the preparatory stage of react native integration with existing apps.

Step #1: Prepare Your Project

In order to do all the preparation activities, you need to start from the following:

  1. Open the “android” folder using the path “React-Starter/android” (if you did not find one, just create it).
  2. Remove all the contents of this folder.
  3. Open the “Android-Project” folder.
  4. Copy all its contents.
  5. Paste the contents here: “React-Starter/android”.

To continue integrating React-Native to an existing Android app, create an RN “Activity” which makes a “ReactRootView. To do that, follow these steps:

  1. Open the Android Studio following the path “React-Starter/android”.
  2. Copy and paste the native code mentioned in the official Facebook’s manual on GitHub.
  3. Replace the word “Activity” with “AppCompatActivity”.
  4. Open the “React-Starter/index.android.js” file.
  5. Find the string, which is the first argument for the method “AppRegistry.registerComponent()”.
  6. Copy this string.
  7. In the created new “Activity”, replace “Hello World” with the copied string.
  8. Find the line “.setInitialLifecycleState(LifecycleState.RESUMED)”.
  9. Insert the line “.setUseOldBridge(true)” right after it.
  10. Open the Gradle file in your package”.
  11. Insert an RN dependency to it.
  12. Open the file following the path “Android-Project/build.gradle”.
  13. Find the line “allprojects { repositories {“
  14. Insert the path to the maven repository to “build.gradle” file.

Now you can use the “Alt+Enter” shortcut to add missing reports to the RN Activity class. Make sure you use the “BuildConfig” from your package but not the Facebook’s one.

Step #2. Run Your Project in a Debug Mode

In order to run your app in a debug mode, connect your device and deploy the application to it. Then just launch the RN Packager with “$ react-native start”. You can make a button to easily launch the Activity. It will connect to the React Native Packager and take some time to download the bundle.

Step #3: Create a Release Build

The good news is that Android Studio allows to create production builds. That is why it is enough to execute the specific code that will create an RN bundle for the native app you have built. Then proceed to the Android Studio and create your release build. That is all you need to do to add react native to an existing android application.

Advantages of RN Framework

This framework makes development much easier. How exactly? To implement a tiny change in a mobile app, you usually have to deploy the whole code to see the final result. RN allows to implement changes by calling a command line and simple refreshing, just like the way you do in a web browser. To see the changes, you just refresh a page. This is only one of its many benefits.

A Possibility to Reuse Code

Whatever app you build with RN you will always have some basic part of a code, which contains the main logic, that can be shared and reused in other projects. It will optimize the usage of coding time and human resources. Furthermore, this reduces a total number of bugs in the final code.

The Need for Tracking Only Current UI

Instead of a basic API, RN has a declarative one. It makes app user interface, which is built with RN, more predictable. You do not need to monitor all the UI changes and modify them. It is enough to work with only the current user interface.

Freedom of Choice

You know that you need to use Xcode for iOS development and Android Studio to create apps for Android platform. This framework provides freedom of choosing any JavaScript code editor you prefer.

Code Omnitude

The main advantage of RN is its comprehensiveness for both Android and iOS platforms. Its packager transcompiles the JS and JSX code to ensure it will work on both platforms.

Easy Readability

The framework provides a possibility to write declarative code that is easy to read for both a system and developer. There is no need to run a code to find out what it will do. It is enough for a specialist to just look at it to understand how a user interface will look like. It is as simple as reading a book and imagining yourself what it describes.

Easy Integration into Existing Solutions

This is a benefit we have talked about in this article and even got assured that it’s not as difficult as it may seem. You have just seen how easy it is to add react native to existing Android project’s code lines. This is a tremendous bonus for those business owners that want to improve their mobile applications but do not have resources for capital redevelopment. Moreover, React Native is built to create highly responsive user interfaces. An RN based app will work much faster than any typical hybrid mobile application.

To Conclude

For now, React Native cannot fully replace native app development. Rendered scenes really work quickly but not as fast as they do in native applications. Such typical components as image loaders, sidebars, or menus – you can easily find ready-to-use solutions. However, if you need some custom Android components you will have to build them in Java anyway.

New components appear on a regular basis but you should take into account that it is an open-source framework. It means these are third-party developers and volunteers who contribute to it. One way or another, if you are confident in what you are doing and you really need to integrate this framework into your existing solutions then we hope our article was helpful. Still, if you need any assistance with integration or want to develop a custom native mobile app you can always get in touch with our team.

Comments