Can React Native be a replacement for native apps?

JavaScript

On many occasions, we had to deal with customers interested in creating mobile applications for Android and iOS. Unfortunately, when they receive a quote, they are disappointed, because it significantly exceeds the budget they have. In such cases, we offer them to develop React Native apps. However, this raises suspicions – how is it that the initial valuation was so high and now suddenly we can offer something much cheaper? Where do we save money? And why did we not immediately recommend this technology? There is no general answer to these questions. We can only explain what React Native is and what it is not, what are the pros and cons of this technology.

The high cost of creating native apps has its reasons. If you want iOS and Android users to enjoy the application, usually you have to write everything twice. On iOS, we usually program in Objective-C or Swift languages, on Androids in Java or Kotlin. Only in a few specific cases, you can use the same libraries written in C or C++ on both platforms. However, in return you can use all native user interface components, which are running far faster and smoother than HTML/JavaScript applications running in your browser. You can also use the features of a mobile device that are usually unavailable for web apps.

To have a cake and eat a cake

It all started with Facebook. In 2012, Mark Zuckerberg admitted that the reliance on HTML5 as a universal app platform for mobile devices failed. Despite the claims of browser manufacturers and niche systems such as BlackBerry OS and Firefox OS, HTML5 apps have never even come close to native Android and iOS apps in terms of capabilities and convenience. So Zuckerberg has promised that in the future Facebook will find a way to work better on mobile devices.

At the same time, one of the Facebook developers, Jordan Walke, found a way to generate a native iOS GUI element from a code in JavaScript running in the background. After a few days of intensive work, a prototype was created that allowed to generate any native interface elements from the code written on the basis of the React.js library. This library has already been used by Facebook to quickly create user interfaces for web applications.

The first version of React Native was presented in 2015 and quickly became one of the hottest topics in the software industry. It combines the advantages of web applications (fast development, easy programming) with the advantages of native applications (quick access to the components and animations of the user interface).

As a result, you only need to write the code once in JavaScript, and thanks to the “magic” of React Native you will get an application with native elements for iOS (from version 8) and Android (from version 4.1), which can be transferred to the Apple App Store and Google Play Store. Well, maybe not entirely in pure JavaScript…. the JSX extension plays an important role here, which allows you to define the drawing of native components in a way that is analogous to the one known from HTML.

How does React Native draw user interfaces?

To understand how React Native technology works on a mobile system, you should first consider the Virtual DOM mechanism from the React.js library. It works as a layer between the description of how the interface should look like and the work done in order to actually render the interface on the website. The interactive user interface on the website is possible only by continuously modifying the so-called object-oriented document model (DOM) of the browser.

In the case of React Native on a mobile device, obviously, you do not modify your browser’s DOM. React Native calls Objective-C interfaces to draw components on iOS or Java interfaces to draw components on Android. This call is possible thanks to a special bridge that provides an interface to native elements of the platform. Components from React return a description of how the interface should look like, and React Native translates this description into compatible ones with iOS or Android.

Thanks to this simple <View> (equivalent to <div> from HTML) turns on iOS into a native UILabel or UITextView controls, and on Androids into a native TextView control.

React Native

From web technologies to native technologies

In fact, you may notice that this approach of combining web technologies with mobile devices has already existed. This is obviously a technology called Apache Cordova, formerly known as PhoneGap. Cordova is a kind of native container around a web application that provides interfaces normally unavailable through a web browser. However, if we take a closer look, we will notice that React Native has nothing to do with Cordova. The application written in React Native is not a website, while the application in Cordova container does not have any access to native iOS or Android interface elements. Even a layman will see the difference in performance and fluidity.

If React Native apps are so efficient and fast, why not save money and not just stop writing native software for mobile systems? The answer is simple – because they are only efficient and fast in terms of the user interface.

We must not forget that all business logic is written in JavaScript, which is not compiled into native code but is interpreted on an ongoing basis when interacting with the native interface on the device. The JavaScript runtime environment of React Native apps is only single-threaded and is not capable of using the full performance of modern multi-core mobile processors.

So if an application needs efficient, multi-threaded business logic, React Native will work much more slowly. Likewise, the more of these application logic interactions with the user interface, the more it will reduce performance. There are some methods of increasing performance – e.g. writing demanding application elements in C/C+++ language, but this will require building special bridges for them, which is associated with additional costs.

Another limitation is that not all views available in React Native are actually native views that are available from the platform. It is said that React Native will achieve full consistency with the release of version 1.0 (version 0.56 is available in August 2018), but nobody knows when it will happen. You should remember that this is a Facebook platform, developed primarily for Facebook mobile applications.

When is it worth to choose React Native?

If you need to create a mobile application quickly, with a limited budget, and at the same time the application is not very complicated – the choice of React Native apps is a very good idea. Any experienced JavaScript programmer who wants to learn how to publish applications in Google or Apple stores can cope with such a task.

On the other hand, if the application is complex and demanding, where little code can be shared and a lot of work will be done on building bridge modules, it is better to program natively for Android and iOS from the very beginning. It should also be remembered that React Native is quickly evolving and changing, and this means that maintaining applications written in it may be more expensive than applications written in Objective-C or Java. In newer versions of React Native, many things can work completely different than before – and all this you will need to cover.

Advantages of React Native apps

  • one code for many platforms (in theory you can go beyond iOS and Android, creating a new bridge for the next platform),
  • one team of programmers,
  • a rapid development of applications in web technologies,
  • simple synchronization of application development and updates between mobile platforms,
  • based on React.js, which is a really good programming framework,
  • a lower price of creating a mobile application,

Restrictions of React Native apps

  • the need to write business logic in JavaScript,
  • limited performance of a single threaded JavaScript runtime environment,
  • the high cost of maintenance and application development due to the rapid development of the framework,
  • limited compliance with Apple and Google interface design guidelines.

Also published on Medium.

Back to Blog