What Is React Native? The Rise of Hybrid Mobile Apps

React Native launched in 2015, and it’s quickly taken the mobile development world by storm.

Having a mobile app is critical for many businesses in the digital-first world we live in. Deciding what platform to use to develop your app though can be tough.

You may have heard about React Native, Flutter, lonic, or Cordova in conversation. These are all frameworks for building a hybrid mobile application, which is a way of building an iOS and Android app from a single codebase.

In this blog post, we explore what React Native is, how it can benefit your company, and when it makes sense to use it instead of building native Android and iOS applications.

What is React Native?

React Native (homepage) is a JavaScript framework for developing mobile applications that can run natively on both Android and iOS. It is based on ReactJS, developed at Facebook, which is a declarative, component-based framework for developing web user interfaces (UIs).

Both tools are highly popular: at the time of this writing, ReactJS and React Native were the 4th and 21st most-starred repositories on GitHub.

If you are already familiar with ReactJS you should easily pick up React Native as the same libraries can be used across both platforms.

Code is shared across platforms

React Native is compiled from a single JavaScript codebase that enables code reuse between Android and iOS. To explain how code can be shared, it’s important to understand that a mobile application can be broken down into two distinct parts:

1. The user interface, made of components that you interact with as a user (think buttons, inputs fields, sliders, etc.);
2. The logic layer (think data manipulation, calculations, storage, and fetching).

Next, let’s look at how these are handled in a single codebase.

Like ReactJS, React Native uses JSX, an XML markdown language for developing UIs which replaces HTML and CSS. From JSX, Ul components are compiled into native platform-specific components which create a fast and familiar experience for end-users.

For example, a React Native Text component renders natively on iOS as a UILabel and on Android as a TextView. Some other hybrid mobile frameworks use web-based components which render HTML and CSS, and ultimately provide a sluggish user experience.

// Hello world in React Native
import React from 'react';
import { Text, View } from 'react-native';

function HelloWorldApp() {
  return (
    <View
      style={{  }}
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
      }}>
      <Text>Hello, world!</Text>
    </View>
  )
}
export default HelloWorldApp;

Independently built native applications typically have a lot of logic in common. This can nearly double the cost for development as they have to be written in two different languages and tested twice.

By using React Native, your web app can share the same logic as your mobile apps, maintaining consistency across platforms, and save you time and money. Instead of having to maintain multiple codebases and employ developers that are proficient in both Android and iOS, you can build a team of JavaScript developers that work on a single codebase.

Improved developer experience

As React Native uses underlying web technology, screens in the application can be reloaded reflecting code changes nearly instantly throughout development. This is compared to iOS or Android apps that typically have to recompile the codebase, re-launch their applications, and then navigate back to that screen to see their changes.

JavaScript is the world’s most used programming language today. The benefits of having a vast array of open source tools and libraries to reuse is hard to overstate.

If you have an already existing team of web developers, it wouldn’t take long to train them from React JS to React Native, although there may be situations where having the ability to get support from native developers (iOS or Android) to assist with platform-specific questions would be beneficial. Finding those developers when you need them though may be the beginning of challenges involved.

It’s not always the right choice

React Native is a brilliant tool for teams that are already familiar with web technology, but it may not be beneficial for teams that want to make a more complex application.

For example, if during development you would like to make quick iterations and rely upon one team, it can be a great choice. However, if you are striving to create a fully custom app that:

• Utilises many custom Ul components,
• Performs heavy animations,
• Uses a lot of device-specific APIs, or
• Uses a bleeding edge iOS and/or Android feature

Then it would probably be worth exploring independent native applications. This often comes down to the reliance on a third-party as a layer between your code and iOS or Android platforms.

So, if a new feature or a breaking change was released from Apple or Google, it would often take some time before the third-party dependency added support for it, if at all.

Who is using React Native

There are some large companies that now use React Native, including the creators of Facebook marketplace and ads, Tesla, Bloomberg, and many others.

The Bloomberg team claims that it took the team of developers in roughly half the time it would have taken had they not used React Native.

Who stopped using React Native

When evaluating a new technology it’s important to take a balanced view and learn both its pros and cons.

Airbnb engineers wrote a series of blog posts on their evolving experience with React Native. After three years the team decided to move off of React Native in favor of native mobile development tools. Some of the challenges with React Native they mentioned include:

• The framework itself evolves quickly, which causes hard-to-debug problems.
• You still have to write some native code — and finding the right balance is hard.
• Debugging and testing across platforms.
• Hiring and organizing people around hybrid apps.
• Maintaining 3 stable and up-to-date development environments (React Native, Android, and iOS).

It’s interesting to compare this with the experience of Artsy, who continue to use React Native despite the tradeoffs.

We recommend that you also ask in your network about people’s experiences. Most companies don’t have the same budget and team size as Bloomberg and Airbnb, so it’s good to hear about the experiences of companies of similar size as well.

Giving React Native a try

React Native is a powerful framework used by businesses of all sizes to build mobile apps. It’s fast, effective, and relatively easy to learn for JavaScript developers. The project homepage is the best place to start learning more.

No matter which framework you use, you can use Semaphore to run continuous integration (CI) to regularly run tests and automate builds so your team can save time and discover bugs sooner. We’ll show you how to implement a cross-platform CI/CD process for a React Native app in one of the upcoming blog posts.