Skip to content

React Native

Native Android and iOS development are quite different and can be expensive. First the language itself is quite different and second, all the underlying API’s are different – the way of using the GPS is different, the way to create animations is different, the way you make network calls is different.

React Native is a framework developed by Facebook for creating native-style apps for iOS & Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS.

The React Native code is written in JavaScript and the final compiled version of the app will be almost native iOS and Android code. React Native helps you build native mobile apps using React and JavaScript. It’s a great choice if you are already familiar with React.

React Native apps are not web application. They are running on a mobile device, and it does not load over the browser. It is also not a Hybrid app that builds over Ionic, Phone Gap, etc. that runs over WebView component. React Native apps are the real native app, the JavaScript code stays as JavaScript, and they run in some extra thread by the compiled app. The user interface and everything are compiled to native code.

Advantages of React Native

  • Cross-Platform Usage: Provide facility of "Learn once write everywhere", it works for both platform Android as well iOS devices.
  • Class Performance: The code written in React Native are compiled into native code, which enables it for both operating systems as well as it functions in the same way on both the platforms.
  • JavaScript: The JavaScript knowledge is used to build native mobile apps.
  • Community: The large community of React and React Native around helps us to find any answer we require.
  • Hot Reloading: Making a few changes in the code of your app will be immediately visible during development. If business logic is changed, its reflection is live reloaded on screen.
  • Improving with Time: Some features of iOS and Android are still not supported, and the community is always inventing the best practices.
  • Native Components: We will need to write some platform specific code if we want to create native functionality which is not designed yet.
  • Existence is Uncertain: As the Facebook develop this framework, its presence is uncertain since it keeps all the rights to kill off the project anytime. As the popularity of React Native rises, it is unlikely to happen.

How does it look

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

const YourApp = () => {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>
        Try editing me! 🎉
      </Text>
    </View>
  );
}

export default YourApp;

A bit more technical

React Native has its own wrappers around the native components. For example: Instead of the span primitive, which we have on the web, React Native offers the Text primitive. If we are building an iOS app, React Native will make sure that the Text results with a native iOS UIView containing the text. If we are building an Android application, it will result with a native TextView.

Even though we are building our app using JavaScript, we do not get a web app embedded inside the shell of a mobile one. The result is a real native iOS or Android app.

web-hyprid-purenative

There are two important threads running in each React Native application. The main thread, which also runs in each standard native app. It handles displaying the elements of the user interface and processes user gestures. A thread specific to React Native. It execute the JavaScript code in a separate JavaScript engine and deals with the business logic of the application. It also defines the structure and the functionalities of the user interface.

Between these two threads is the so-called bridge, which is the core of React Native.

The bridge has three important characteristics:

  • Asynchronous. It enables asynchronous communication between the threads. This ensures that they never block each other.
  • Batched. It transfers messages from one thread to the other in an optimised way.
  • Serializable. The two threads never share or operate with the same data. Instead, they exchange serialized messages.

Development Environment

You will only need a recent version of Node.js and a phone or emulator.

If you'd like to try out React Native directly in your web browser before installing any tools, you can try out Snack.

If you are already familiar with mobile development, you may want to use React Native CLI. It requires Xcode or Android Studio to get started. If you already have one of these tools installed, you should be able to get up and running within a few minutes.

When you are building your application for iOS you will need macOS. For Android you need JDK and Android SDK. You can also build your app using cloud services.

Read more: