React Native Integration With Existing Apps. Benefits + Memos

React Native is still young but already popular framework to build iOS and Android apps (including marketplace platforms). This tendency prevails not only among developers but also business managers and CEOs. If you google for this technology, you might observe that the number of ‘how to build react native app tutorial’ queries is constantly increasing. React Native being produced by the most popular social media out here, Facebook, is far not the only reason why it’s almost a mainstream.

In this article, we'd like to touch upon studying the cases of React Native integration with existing apps which makes React Native even more flexible technology to use.

Let’s see what we’ve got here in numbers

The very first thing, worth to be mentioned is the front-end development, where React Native’s ‘older brother’, React leads the way:

React Native Integration With the Existing Native App. Benefits + Memos-1

Source: The State of JavaScript 2017, front-end development tendencies

Now, the trends in mobile development:

React Native Integration With the Existing Native App. Benefits + Memos-2

Source: The State of JavaScript 2017, mobile development tendencies

As we can see a lot of developers still prefer 'clean' Native development. That’s not the verdict, though. Take a closer look at React Native and the percentage of people who ‘have USED it before, and WOULD use it again’ and the percentage of people who ‘have HEARD of it, and WOULD like to learn it’.
We theorize that by the end of 2018, this piece of stats can have a completely different look with RN leading the way or competing with Native development.

Why might my project need migration to React Native or integration with the existing Native app? What are the benefits?

Consider you have an Android app. You want to build the version which works for iOS too, but you don’t have enough assets and/or time. RN can be the exact option you might need. The framework provides code reuse and code sharing opportunity. It means that you can use one code for both iOS and Android apps which saves your development team and you more time and resources.

Let’s consider a trivial but a real-life example:


React Native Integration With the Existing Native App. Benefits + Memos-6 React Native Integration With the Existing Native App. Benefits + Memos-3

React Native Integration With the Existing Native App. Benefits + Memos-4 React Native Integration With the Existing Native App. Benefits + Memos-5

Or take, for instance, another situation. You have Android Native project and React Native iOS project. You need to make some iOS app functionality available for Android also. This is another trick React Native can perform.

React Native integrates with Native Swift or Java code and you can see it in action. If the code is stable and well-written for one platform (i.e. iOS), it will work well for another one (i.e. Android). To make functionality created with RN work well for both mobile OS’s, there are 3 key dependencies:

React Native Integration With the Existing Native App. Benefits + Memos-7

Adding React Native to the existing project. Pains and gains

Previously, in one of our articles, we've described possible RN limitations you can face when working with this technology ‘React Native Limitations and Best Practices to Deal With Them’. During the migration to React Native or React Native integration with the Android/iOS existing apps you might meet similar boundaries on your way. Especially those which refer to the ‘bridging’ process in Native and React Native communication.

React Native Integration With the Existing Native App. Benefits + Memos-8

Most of React Native integration with the existing Native app issues might be caused by the ‘bridging’ process.

Juan Rodriguez, a full-stack engineer, suggests to move the project to RN in a step-by-step manner in his article. He describes the process and denotes the key actions during the migration. Among them are:

  • Adding React Native view to native Android/iOS app;

  • Container creation for React Native component

  • Bridge creation for RN views sharing

  • Methods to consume native classes, dealing with UI components and modules (State, Action, Navigation).

The migration to React Native or adding React Native to the existing project is definitely not a 1-2-3 process. There are a lot of aspects to pay attention to and check after the React Native migration.

The things you can gain with the migration to React Native or integration with the Native app

Apart from code sharing/code reuse, React Native provides such key benefits as:

  • Contribution to the technology, since it’s open source;

  • Creation of a mobile app for both platforms which can be as scalable as a clean Native app;

  • Instant app reload and hot reload options instead of recompiling

Read about other React Native benefits and drawbacks in details in: Benefits and Drawbacks of React Native: Business Point of View .

What are the possible drawbacks during the migration to React Native or React Native integration with existing apps?

Scenario #1: Migration to React Native:

The very first challenge is almost a complete project rewrite to JavaScript and RN. There’re two sides of a coin. Such technique suits best only when you plan to work with RN to create the app for a different mobile OS in the future. Usually such decisions require strong reasoning and arguments. When you’re lacking Native developers in the staff, you can use the power of RN and spend less resources on separate iOS or Android app development.

Scenario #2: React Native integration with the existing Native app

Communication between React Native and Native is of high importance here. As we’ve already mentioned it above, it’s usually done to make the natively written functionality for one OS available for another one. What challenges to expect?

It might take some time for your Native developers dept. to figure out the optimal way to tie RN and Native together and preserve the performance. Another fact that might be the source of multiple bugs, is the app’s constant communication between RN-written functionality and the natively-developed part.

Now, vice-versa. You need your customer to use app’s Native functionality. As a result, you’ll have to write Native code which will perform such redirection. Then you’ll have to create Native modules to make Native code work with RN. Native modules creation requires further support and debugging.

You can find assistance in RN tools, like Expo. Read about how effective Expo utilization results in the desirable outcome: Tools For React Native App Development: Expo Review

Mini count-up list

With RN development for both platforms, you can save investment, starting from 35%. This percentage also depends on the project itself, especially how much source code can be reusable for both platforms according to its functionality. In general, if the application doesn't have specific features related to one platform you can save 40% of initial budget.

For instance, you’ve got the project the Native development of which costs $ 50k (for both mobile OS’s). With RN you can lower the cost to ~ $ 30k, means you can save ~ $ 20k. But! Once again the proportion strongly depends on how intensively you will reuse code.

Summing up

As we can see, React Native is more than just a worthy alternative to Native development. The benefits this platform offers you are worth to try. We can also state it by means of the stats earlier provided in the article. The success of your project also depends on who you trust with the React Native development stage. That’s why Apiko team offers you a high-class React Native development and reliable support throughout the entire communication cycle.