How to Integrate React Native into Your Android Mobile App
A Guide To Integrate React Native Into Your Existing Android App
The sky-touching popularity and progress of React Native cross-platform framework have not been hidden from anyone. Long back, one of my colleagues told me about React Native but I took it as another cross-platform framework that won’t work practically. But the way experienced and beginner developers are using its components to speed up their development process, my opinion has totally changed.
If you are a startup or a business enthusiast, surely native app development is your priority. The majority of us believe that apps created with native programming languages are more robust. However, if you are looking for ways to fast-forward your app development process, then integrating the components of React Native into your existing app will be a perfect option.
However, if you are in a dilemma of how to get started and why to choose React Native, then here we have gathered all the relevant information for you.
Table of Content
- Why Should You Choose to Integrate React Native in your Existing Android App?
- How To Integrate React Native To Your Android App?
- 9 Steps To Integrate React Native With an Existing App - How Much Does It Cost to Integrate React Native Into Your Existing App?
- A Professional App Development Team Required To Integrate React Native Into An App
- Conclusion
Let’s get into the details of each point for a better understanding…
Why You Should Choose to Integrate React Native in your Existing Android App?
When it comes to developing a Native app, undoubtedly, the majority of mobile app developers are either looking for Kotlin or Objective C native programing languages. But what if you already have a native Android app and you want to create the same app for an iOS operating system?
Instead of writing the codes from scratch, integrating a React Native module into the existing app will help you create a solution that works on both platforms. The process of integrating React Native into native apps is complex initially, but if dealt with carefully by hiring a react-native development company, you can save heaps of time and cost. Before we start discussing the process of integrating React Native into your existing app, let’s have a look over the reason for integration.
Why Should Integrate React Native Into Your Existing App?
Let’s shed some light on the perks of integrating React Native into your existing app.
- Quick To Market
Instead of writing the codes right from scratch to create another native app, it is worth integrating a React Native into the existing application to quickly
market your app. The reason is, React Native uses a Single codebase which ensures faster debugging, quicker testing and easy app maintenance as compared to the naive approach. In addition, the capabilities like hot reloading, support of 3rd party plugins, seamless customizations make app integrations easier with React Native.
2. Code Re-usability
With React Native, it becomes far easier, quicker and simple to create an app for both platforms. It is expected that 90% of the codebase can be reused if you incorporate React Native in the exciting Android or iOS app. Also, React Native offers pre-developed components and a shared codebase, therefore, developers can accelerate the speed of the app development process.
3. Saves on Budget
Whether you are creating the same iOS native app or integrating React Native into the existing app to make it available on both platforms, its development cost is always the biggest concern. While building a native app is always a costly affair, therefore, integrating React Native into your existing app enables you to reduce the app-building cost. By hiring an app development company, you can develop a business-oriented app at a very low budget. Since it’s an open-source framework and you only need to maintain a single codebase, therefore it saves a huge cost on app development. All you need is to collaborate with a capable small team of developers to handle the task.
The reasons for integrating React Native into your existing app can go on and on, but let’s resume to our main topic of this blog. From here we directly move to the next step of this blog to understand how to create React Native Powered Android Apps?
How To Integrate React Native To Your Android App?
As now you know the reasons and advantages of integrating React Native into an existing app. While developing an app with React Native is the best deal as it ensures faster app development, low maintenance of the app and ensuring the same features in both iOS and Android. If you are creating an app from scratch then React Native is definitely a way to go. But how does it work when it comes to adding user flows, screens, views or features into an existing app? Adding React Native to your existing app can also save a lot of time and effort. All you need is to learn the right procedure.
Let’s get started…
9 Steps To Integrate React Native With an Existing App
Step 1: Prerequisite To Get Started
To get started, firstly you need to set up a system for React Native that enables you to install or configure the tools for writing any native code into your existing app. If you don’t have a system yet, then make sure you have the following set up:
- React Native Development Environment — NodeJS, CLI, etc.
- Android Development Environment: Android Studio, Java Development Kit, etc.
- iOS Development Environment: Xcode, CocoaPods, more.
If you are still not ready with the setup, then choose React Native CLI to quickly start the setup process.
Step 2: Setting up a Separate Platform
Here you need to create separate platforms to keep your integration process simple and straightforward.
- React Native
When it comes to setting up an environment, most of the documents will ask you to create package.json, install react and react-native package, init pod file and more. These steps are required to init some files and directories that RN needs and it does the same thing when init a bare RN project except /android and /ios folder. These folders serve as the container for your React Native component.
So instead of creating, installing every file or package manually, you can use the below command to fastly initialize the RN project.
react-native init YourNameProject
Once you set up the project, then design your views, add fonts, routing, fetch API or anything you want at RN.
After that, you can remove all the files in /android and /ios subfolders or you can opt to replace the existing native project at the next step.
- Android Native
Initialize the Android project by Android Studio at /android subfolder. You can also take this as your existing Android native project that you need to embed the RN module into the subfolder at /android.
Next, you need to find and edit android/build.Gradle, android/app/build.Gradle, AndroidManifest.xml. To edit files, you can hire a react native app developer. The experts can better compare such files with the corresponding files in the source code. Allow developers to add some configuration into them.
- iOS Native
Initialize an iOS project by Xcode at /ios folder. Take it as your existing iOS native project that you need to embed the RN module into a subfolder.
To proceed further, you need to create a pod file by running pod init at the iOS folder and edit this file by comparing corresponding files in the source code. Experts can also add some config into them. So once you have created your Podfile, you are ready to install the RN pod.
Step 3: Embedding React Native To Existing Native Codes
- On Android
When it comes to embedded RN to native code, you don’t need to modify MainApplication.kt. It would be considered when adding native packages during RN development. However, when it is about integrating the React Native Module to the native code, its scope matters instead of considering native scope.
Next, create another activity and name it RNModuleActivity.kt which contains an RN application inside it. You need to set it as the main content view. You can edit it by comparing it with corresponding files in the source code.
Complete this step by adding it through AndroidManifest.xml
- On iOS
You need to follow the same procedure, no further action is required on this step.
Step 4: Navigating To React Native From Native Code
Access the screen of native code and then navigate to React Native screen and then send a param. After this, you need to Toast this message in React Native Screen. To avoid such complexity, here we are mentioning the codes for Android and iOS.
Let’s see how we can navigate to React Native from Android and iOS native codes.
- For Android
Here we are starting with Android 9, where cleartext traffic is disabled by default. This practice prevents your app from connecting to the React Native packager. While this task can be easily handled by hiring a software development company, still we are providing the source code for further reference. The further changes will be done in cleartext traffic in debug builds.
To clear text traffic, you can apply the usesCleartextTraffic option to your AndroidManifest.xml. Here are the source codes for your ready reference.
- On iOS
The process of navigation to the RN screen will remain the same. But Apple used to block implicit cleartext HTTP resource loading. So here you need to consider adding NSAppTransportSecurity to Info.plist. Don’t panic, here we are mentioning the source code to make the task easier.
Step 5: Creating React Native Module for Testing Communication Ability
As now you have embedded and navigated the RN codes into native codes, it’s time to test the ability to communicate between js and native code. So to get started and test these features, you need to create a module with the name of TestConnectNative to perform 2 things:
Send a message to native code, then show log from them (Swift or Kotlin Code).
Send a callback to native code and receive a return value at js code.
Call native function to dismiss RN views (iOS).
- Testing on Android
To test Android native code, a native module needs 2 files.
File 1: Module: That contains all functions along with logic code.
File 2: Package: Register the module from JS
- Conducting Testing on iOS
With iOS, a native module also needs 2 files like Android.
File 1: Swift: Contains all the functions along with the logic code.
File 2: .m: Objective-C file to expose your methods to JS.
Step 6: Create a Wrapper Features at React Native To Call From JS Code
While it is not mandatory to create these features, it helps in saving consumers of your library the need to pull it off of NativeModules each time. The JavaScript file is also considered a good location for you to add any JavaScript Side functionality.
// If TestConnectNative is an package from npm, you can think this is index.js file
import {NativeModules, Platform} from ‘react-native’;
export default TestConnectNative;
Now, from your other js file, you can call the method like this:
// Send a message to native code
TestConnectNative.sendMessage(this.state.messageToNative);
// Send a callback to native code and receive a message from it
TestConnectNative.sendCallback((nativeMessage) => {
console.log(`This log is from js code callback with native message: “${nativeMessage}”`);
});
// Exit RN to go back to native
TestConnectNative.exitRN(rootTag);
Step 7: Exit RN To Go Back to Native
- Android Native
In Android, you can take an easy exit from the RN screen by building BackHandler.exitApp(). Else you can look for professional assistance to use getCurrentActivity().finish() at Kotlin code.
- Exit RN Screen from iOS Native
Here you are advised to create a bridge so you can reuse this bridge to dismiss or navigate ViewController Later. So create a file named RNViewManager.swift to handle load root react view and control the bridge.
Step 8: Navigate the New Native View From RN
- Navigating Through Android Native
You need to use getCurrentActivity() then start an intent and check codes at TestConnectNativeModule.kt file.
- Navigating Through iOS Native
You can use RNViewManager to get the current view controller then create another view controller. Further, test the codes by using TestConnectNative.swift file.
Step-9 Launch An App
Finally, start your project with the npm start or React-native start and, on android studio. Further, hit the green play button to open an emulator and launch an app.
Now the question is how much does it cost to integrate React Native to Your Existing Native App? Since app development is a complex process and integrating RN to your existing project or considering migrating the app to another platform can pinch you pocket. So before you hire a mobile app developer, you must be curious to know how long does it take to integrate RN into native and its cost. No matter whether you are running a basic app or having a complex app, the cost of integrating an RN into your existing app is always a pressing concern of businesses. Let’s move further to know the cost…
How Much Does It Cost to Integrate React Native Into Your Existing App?
Usually, the cost of developing a native app is floating between USD 17,500 to 20,000 for a single platform but integrating React Native to the native app can save you huge time and cost. While developing a basic version of two native apps takes around 9+ months for development and costs between USD 30,000 to USD 35,000. That’s where developing an integrating RN to your existing native codes may take around 3 to 4 months and make your app compatible to run on both platforms.
However, when it comes to estimating the cost of integrating into native codes, you need to evaluate the complexity of the app, features, functionalities and design. The more complex app will take a higher time for React Native integration. But still, the average cost of integrating the React Native to the native app is ranging from USD 20,000 to 22,000+. However, before you take any decision, it is recommended to book a free consultation slot with the experts. Discuss the scope of integration into your native app with experts.
Conclusion
With the increasing hype of cross-platform frameworks, undoubtedly, businesses are aggressively shifting their native apps to cross-platform. And React Native is one such open-source cross-platform framework that has taken the world by storm. So if you are also planning to integrate React Native into your existing app then you can hire a mobile app development company to save time, money and resources on the process. Integrating React Native with an existing app is a smart move to make your app compatible to run on multiple platforms, improving speed and addressing customer needs in the shortest time frame.
So if you are all set to migrate the app to another platform and looking for expert advice and professional assistance then you can contact us or drop a query below.
========================================
More content at PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter and LinkedIn. Join our community Discord.
