Technology

Why we use React Native to develop mobile apps?

headerImageSource

React Native is an exciting mobile application framework created by Facebook, used for cross-platform mobile apps development. Read our new blog post and find out why React Native is our technology of choice.

We deliver top-notch web & mobile solutions and React Native is our technology of choice.

React Native is an exciting mobile application framework created by Facebook, used for cross-platform mobile apps development. The UI is rendered using actual native views, so the final user experience is way better than other frameworks that render a web component inside a WebView. You can use React Native today in your existing Android and iOS projects or you can create a whole new app from scratch.

📚 Brief history of React Native

In 2012 Facebook decided to become a mobile-first company. They faced a big challenge, rendering web applications on mobile. Their first idea was to put the WebView inside a mobile native container, reusing the WebView already available on their servers, but they failed miserably. After that, they changed their tactic and tried to generate native UI elements from a JavaScript thread running directly on the mobile device. The idea was finished at Facebook's internal hackathon in 2013 as something today known as React Native. It was open sourced at React.JS Conf in January 2015.

🤔 Why React Native?

Facebook and the massive community around React Native are constantly working on improvements for the framework, so we don’t have to worry about the future. Using the same codebase for both platforms comes with a lot of benefits: easy and fast bug fixing, no need for Android and iOS developers, low project cost alongside rapid development and deployment.

📈 Market share

According to Statista, in 2019 and 2020 42 percent of cross-platform mobile developers used React Native, followed by Flutter (more details in the following sections).

Image

Although, Google Trends show that React Native is not the most popular search term. This is only a representation of the number of searches for each of these terms.

📱 Popular apps

A lot of great apps are built with React Native, and you are using them daily, without even knowing it. Some companies write blogs posts about their adventures in react native, one of those companies is Discord.

Image

⚔️ React Native vs. Full Native

Cross-platform mobile app development is becoming more and more popular, but why would you choose it over full native apps?

Teams

When developing native apps, at least two teams are required - one for the iOS app and one for the Android app, while with React Native you can have one team focused on developing (a single) cross-platform app. It's obvious which approach is more expensive and time consuming. React web developers can easily switch to React Native and work on both React Native and React web applications, even re-using some parts of the codebase on both React Native and React.

Performance

Full Native will always win this one, although React Native has sufficient performance capabilities for most use cases, full Native is better suited for resource intensive apps (3D/VR/AR). Animations are also something that will work better in Full Native, for example, there is no easy way to create animated screen transitions between bottom tab navigators in React Native. You can try doing it using custom React Native animations with Animated API, but fading in a screen with a list consisting of 50 images every time the user navigates to the screen would decrease performance significantly.

User Interface

Have you ever tried to set up a simple scrollable list for Android in Java? You need to configure a RecyclerView component with LayoutManager and a custom adapter. Sounds complicated, right?

With React Native, you can easily do that using a simple FlatList component. This is just one example, but React Native's approach to structure UI using Flexbox can hardly be beaten. Component's styles look almost identical to CSS rules, with an exception of using camel case annotation instead of spinal case.

Here is an example of some component's styling:

import React from 'react';
import { View, StyleSheet, Text } from 'react-native';

const Component = () => {
  return (
    <View style={styles.container}>
      <Text>Hello world!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    fontSize: 14,
    textAlign: 'center',
  },
});

export default Component;

Native modules

React Native covers a large amount of cross-platform use cases, but it's impossible to cover all of them. There will always be a need for native modules like push notifications. Most of these modules are linked automatically when installing, but for some of them need to be linked following a specific set of instructions, making it tricky for developers who never developed native mobile apps.

Codebase

React Native uses a single JavaScript codebase for 2 different platforms, which is a great thing, but it comes with a cost. It is well known that Android and iOS have design differences, so the developer may end up having to write platform-specific code, which is against the purpose of React Native. If we want some part of the code to run only on iOS or Android, we can use the Platform module from React Native:

import { Platform } from 'react-native';

if (Platform === 'ios') {
  // iOS specific code here
}

if (Platform === 'android') {
  // Android specific code here
}

⚔️ React Native vs Flutter

We have to compare React Native with its main competitor - Flutter, an open source software development kit used to develop cross-platform mobile apps, officially released by Google in 2018. The two can be compared in a couple of main areas:

Programming Language

React Native uses Javascript or Typescript making it very easy for new web developers to get into mobile apps development. On the other hand, Flutter uses a programming language called Dart and is not widely known in developer communities, so it might take more time to learn a completely new programing language.

Layout

Flutter uses premade widgets to construct user interfaces. Widgets are created and tested by Google, so the developer doesn't need to create custom widgets unless he wants to. On the other hand, React Native uses JavaScript and JSX to create UI components. They share one important thing, the ability to style layout using flexbox. Under the hood, the implementation is completely different, but the effect remains the same.

Support and developer ecosystem

Both are well maintained, as you would expect considering the fact they are created by Facebook and Google. React Native's Github repo has 95k stars, while Flutter's has 118k. As expected, React Native's ecosystem is more mature and has more users, since JavaScript has been around since 1995.

💻 Installation

Installation should be straight forward, without any complicated steps, making it easy for new developers. React Native is installed using Node Package Manager (NPM), while Flutter needs to be downloaded as a .zip file, extracted and added as a PATH variable, which adds to the complexity.

Creating React Native Apps

We will show you how simple it is to create a bare React Native app. Make sure you have Node.js installed on your device. The app is created using npx, which is automatically installed with Node.

All you need to do is run the following command:

$ npx react-native init myProject

After that, your first React Native app should be created! Your myProject folder, or whatever you named your app, looks like this:

Image

You can start editing the App.js file to see the changes. If you are on iOS, make sure you have installed Xcode and configured an iOS simulator. You can install your app to a device using the following command:

$ npx react-native run-ios

If you are on Windows, you should have Android Studio installed. Run an Android Emulator device, and to start your app:

$ npx react-native run-android

And that’s it! If there are any problems, please visit React Native docs.

Expo

Expo is a framework and a platform for building React Native apps. It provides a set of tools and services built around React Native and native platforms that help you develop, build, deploy, and quickly iterate on iOS, Android, and web apps from the same codebase. We will show you how to create a React Native app using Expo. First, you need to install Expo CLI:

$ npm install --global expo-cli

New app is simply installed using the following command:

$ expo init my-app

You will be prompted to choose a template. We recommend going with blank:

Image

After you have created an app, you can run it using:

$ expo start

That's it! Now you have an expo app running and you are ready to start developing.

✌️Conclusion

Using React as primary frontend technology for developing web apps, React Native comes as a logical solution to develop mobile apps. The ecosystem and the community behind React Native and the ability to reuse 90% of code have won us. Using React Native, we develop fast, stable and smooth mobile apps within reasonable time.

Share this article on

Wanna see our work?

Check out our rich portfolio and all the projects we are proud of.