What is React Native and how does it work?

If you are building an app, you are definitely building a mobile version. Whether you choose the mobile-first approach or decide to build for all possible platforms, you will return to a mobile version sooner or later. With 2.7 billion smartphone users worldwide, you cannot ignore such an important chunk of your customer audience.

Building a mobile app, in fact, means building two apps – one for Android and one for iOS. Of course, there are other platforms, too – Blackberry, Windows Phone – but you need to build at least for the two top ones. In its turn, it means two toolsets, two programming languages – Java and Kotlin for Android and Swift or Objective-C for iOS, two developer teams… extra costs, more time, you get it.

That was before React Native. When Facebook released this platform in 2015, mobile development has changed significantly.

Why is React Native so popular?

React Native joins the benefits of React and the advantages of native development. Simply put, it allows building apps running on iOS, Android, and Web. Moreover, it is a JavaScript framework, and with JavaScript quickly becoming one of the most popular languages in the developer community, the learning curve for React Native is not too steep.

React Native has its roots in React using one of its main concepts – reusable components. This feature makes the development much faster than with native technologies. This may be especially valuable when you are building something time-critical, such as an MVP.

As we mentioned already, React Native uses a lot of generic code that is similar for both iOS and Android. This makes updating the app much easier and quicker, as instead of updating two apps you only need to update one code with changes applying to both apps.

Another thing that developers love about React Native is the so-called “hot reload”. Hot reload means that you do not need to recompile your app every time you want to see the changes you have made. Applying the change takes approximately as long as refreshing a browser page. However, if you are using a native language to write your code, you will still need to recompile the app to see the changes you made.

How does React Native work?

Let’s briefly look at the basic concepts of React Native to see how it works.

Components

React Native components are basic building blocks that you can use in almost any app. There are common components, such as Text, View, or Image; UI components, such as Button Switch, or Slider. Besides, among the built-in React Native components, you can find iOS-specific and Android-specific ones that you can use to build native apps for a particular platform.

In addition to the components that are included in the React Native package, you can find dozens of libraries created by the developer community and containing other useful things that you can also add to your app.

React Native Bridge

The React Native Bridge helps to pass data between JavaScript and the native language. This way, developers can reuse the libraries that have been built specifically for iOS and Android and implement their functions in a cross-platform app.

The bridge allows calling native functions from the app by reaching out to the corresponding native libraries.

React Native Threads

React Native supports four types of threads each performing a specific function:

• Main thread, or UI thread, used for native iOS and Android UI rendering.
• JavaScript thread over which the JS code is executed and API calls are made. The JS thread passes all the logic of the app updating the native views.
• Native modules thread used to reach platform-specific APIs when necessary.
• Render thread generating OpenGL commands that are used to draw the UI.

What to consider when you are going to create a React Native app

Nothing is perfect, and with all the benefits of React Native, there are still certain drawbacks that you need to take into account.

Available libraries are often suboptimal or hard to find

As with many open-source projects, the libraries are often offered as alpha or beta versions. As a result, their performance is not always reliable. Many libraries are focused on one platform only and are not suitable for the other one.

Besides, though the number of available React Native libraries is rather large, the native libraries are still more numerous and diverse, not to mention their performance quality.

Building large React Native apps is difficult

React Native works great for small apps, but when you are planning a large project, be prepared for lots of issues and problems. A large app often requires bridges (aka Native Modules) to be written in React Native which makes the development extremely complicated.

With many bridges, you are getting too many asynchronous processes that need to be validated both on JavaScript and native language sides. This brings certain limitations to the app functionality.

Large React Native projects are more time-consuming

When a project reaches a certain size, it becomes increasingly harder to build and test. You may notice that while React Native can bring considerable time and resource savings in small projects, large applications may become too heavy to build and test quickly.

All these considerations lead to an obvious conclusion – React Native is great for small apps such as MVPs, startups, or non-sophisticated products. At the current stage, we recommend choosing native development if you are planning an extensive and complex application.

React Native use cases

Many popular brands integrate products built with React Native into their apps. If you search for React Native use cases, you are going to come across such names as Facebook (of course!), Bloomberg, or Instagram. However, these brands use React Native not as the primary framework for their apps but only for some of the functions.

For example, Facebook uses React Native for Facebook Ads, and it seems to be suitable for rather complex tasks that the product contains. Before React Native, a large part of the Facebook Ads code was already written in JavaScript, so the migration was not too difficult.

Instagram chose React Native to build the Push Notifications view. In push notifications, the UI is rather simple and using React Native allowed rolling out the new view very quickly. Instagram relies heavily on its mobile apps, thus, being able to share the code between the two platforms was a true advantage for it.

Bloomberg switched to React Native in its mobile app which is a personalized news feed. The company opted for React Native for its speed of development and easy updates.

Why use React Native?

We definitely recommend trying React Native as a framework to create simple apps that can run on both major mobile platforms – iOS and Android. React Native can save you both time and costs which may be especially appreciated by startups. With React Native, you can reach the widest mobile user audience within the shortest time possible.

Great news from our side! Try out React Native SDK for your cross-platform applications. And if you have any questions about React Native or QuickBlox’s implementation of this advanced concept, or if you need a piece of advice about setting up a React Native chat app, contact us for a detailed consultation.