The Magic Behind React Native: A Deep Dive into Its Architecture and Components

How React Native Works on Android and iOS?

Have you ever wondered how you can use JavaScript and React to create native mobile applications that run on both Android and iOS devices? How does React Native bridge the gap between the web and the native platforms? What are the main components and the architecture of React Native? In this article, we will answer these questions and more, as we explore the inner workings of React Native, a powerful framework that leverages the best of both worlds.

React Native Architecture

The React Native architecture consists of three main layers: the JavaScript layer, the native layer, and the bridge layer. The JavaScript layer is where the application logic and the UI components are written using React and JavaScript. The native layer is where the native code and the native UI components are executed on the device. The bridge layer is where the communication and the data transfer between the JavaScript and the native layers happen.

The JavaScript Layer

The JavaScript layer is where the React Native application is written using React and JavaScript. React is a library that allows developers to create reusable UI components that can render different views based on the application state. React uses a concept called JSX, which is a syntax that lets developers write elements inside JavaScript, such as <Text>Hello, I am your cat!</Text>.

The JavaScript code is bundled using a tool called Metro, which is a JavaScript bundler that is optimized for React Native. Metro works similarly to Webpack, a bundler used in web development, but it has some specific features for React Native, such as code splitting, hot reloading, and fast refresh.

The JavaScript code is executed on a JavaScript engine, which is a program that can compile and run JavaScript code. React Native uses JavaScriptCore, which is a JavaScript engine written in C++ and developed by Apple. JavaScriptCore is built-in on iOS devices, but it is bundled with the React Native framework on Android devices.

The Native Layer

The native layer is where the native code and the native UI components are executed on the device. The native code is written in Java or Kotlin for Android, and Objective-C or Swift for iOS. The native code is compiled into binary files during the build time, and packed inside an executable file for the targeted platform.

The native UI components are the core components that React Native provides, such as View, Text, Image, Button, etc. These components map directly to the native UI components on both Android and iOS platforms, such as android.view, android.widget, UIKit, etc. These components are responsible for rendering the UI on the screen of the device, and handling the user interactions and the events.

The Bridge Layer

The bridge layer is where the communication and the data transfer between the JavaScript and the native layers happen. The bridge layer consists of two main components: the bridge and the layout engine.

The bridge is a set of programs that allow the JavaScript and the native code to communicate with each other. The bridge uses a form of data that both languages can understand, which is JSON. The bridge transfers serialized messages between the JavaScript and the native threads, and then deserializes and processes them accordingly.

The layout engine is a program that calculates the positions and the sizes of the UI components based on the layout code written in the JavaScript layer. React Native uses a layout engine called Yoga, which is a cross-platform layout engine that implements the Flexbox algorithm. Yoga converts the Flexbox-based layout into a layout system that the native host can understand.

How React Native Works on Android and iOS?

Now that we have a general overview of the React Native architecture, let’s see how it works on both Android and iOS platforms. We will use a simple example of a React Native app that displays a text and a button on the screen.

React Native on Android

When a user runs a React Native app on an Android device, the device will start three main threads, as well as some background threads if needed. These threads are:

• Main Thread: This is the main native thread on which the app runs. It is responsible for rendering the UI on the screen, and handling the user interactions and the events.
• JavaScript Thread: This is where the JavaScript code runs on the JavaScriptCore engine. It is responsible for the application logic and the UI components.
• Shadow Thread: This is where the layout engine runs. It is responsible for computing the positions and the sizes of the UI components.

The app will also load the JavaScript bundle and the JavaScriptCore engine from the React Native framework. The app will then initialize the bridge and the layout engine, and start the communication between the JavaScript and the native layers.
The app will then render the UI on the screen by following these steps:

1. The JavaScript thread will create a tree of UI components using React and JSX, such as <View><Text>Hello, I am your cat!</Text><Button title="Meow" /></View>.
2. The JavaScript thread will send the UI components tree to the shadow thread via the bridge as a JSON message.
3. The shadow thread will use the layout engine to calculate the positions and the sizes of the UI components based on the Flexbox algorithm.
4. The shadow thread will send the layout information back to the JavaScript thread via the bridge as a JSON message.
5. The JavaScript thread will send the UI components tree and the layout information to the main thread via the bridge as a JSON message.
6. The main thread will use the native UI components to render the UI on the screen according to the layout information.

When the user interacts with the app, such as tapping the button, the app will handle the event by following these steps:

1. The main thread will capture the event and send it to the JavaScript thread via the bridge as a JSON message.
2. The JavaScript thread will use the event handler to update the application state and the UI components accordingly, such as changing the text to “Meow, I am your cat!”.
3. The JavaScript thread will repeat the steps 2 to 6 from the rendering process to update the UI on the screen.

React Native on iOS

When a user runs a React Native app on an iOS device, the device will start the same three main threads as on Android, and load the JavaScript bundle and the JavaScriptCore engine from the iOS system. The app will also initialize the bridge and the layout engine, and start the communication between the JavaScript and the native layers.

The app will then render the UI on the screen by following the same steps as on Android, except for the last step. Instead of using the native UI components directly, the main thread will use a wrapper component called RCTView, which is a subclass of UIView, the base class for all UI components on iOS. RCTView will then use the native UI components to render the UI on the screen.

When the user interacts with the app, the app will handle the event by following the same steps as on Android, except for the first step. Instead of capturing the event directly, the main thread will use a wrapper component called RCTViewManager, which is a subclass of RCTEventEmitter, a class that handles the events on iOS. RCTViewManager will then capture the event and send it to the JavaScript thread via the bridge.

Conclusion

React Native is a framework that combines the power of JavaScript and React with the performance and the look-and-feel of native platforms. React Native works by creating a bridge between the web and the native layers, and transferring the data and the events between them. React Native works on both Android and iOS platforms, with some minor differences in the implementation details. React Native offers many benefits, such as code reuse, faster development, and easier maintenance, but it also has some challenges, such as performance issues, debugging difficulties, and native dependencies. React Native is a great choice for developers who want to leverage their web development skills and create cross-platform mobile applications that feel native.