How React Native works

React Native is a popular framework for building mobile applications using JavaScript and React. It allows developers to write code once in JavaScript and run it on both Android and iOS devices, bridging the gap between web and native mobile development.

In this article, we’ll explore the main components of a React Native application and how they work together to ensure smooth and efficient performance. We’ll also explore how React Native handles the rendering and management of the user interface, making sure it remains responsive and delivers a seamless user experience. The three major components of React Native—the native side, the JavaScript side, and the bridge—will be explored in depth, explaining how they work together to provide a seamless and efficient environment for mobile app development.

What is React Native?

React Native is an open-source framework developed by Facebook that enables developers to create mobile apps with JavaScript and React. In contrast to native development, which involves writing code separately for Android and iOS, React Native allows developers to write code once and execute it on both platforms. By leveraging native components and APIs, React Native fills the gap between web development and mobile app development, bringing the best of both worlds—efficiency and speed. Using React Native, developers can create high-performance, cross-platform applications that are native-looking and native-feeling.

Threads in React Native App

React Native uses multiple threads to manage the tasks involved in running an app. The main threads are:

UI Thread (Main Thread)

The UI Thread is responsible for rendering the user interface of the app. UI Thread, also known as Main Thread, is used for native android or iOS UI rendering. For example, In android this thread is used ensures that the app’s interface is responsive and visually rendered.

JS Thread (JavaScript Thread)

JS thread or Javascript thread is the thread where the logic will run. For e.g., this is the thread where the application's javascript code is executed, api calls are made, touch events are processed and many other. For performance, React Native ensures that the JS Thread sends updates to the UI Thread before the next frame rendering deadline (which is around 16.67ms for 60 frames per second on iOS).

• If the JS Thread performs complex computations that take more than 16.67ms, the UI can become sluggish or unresponsive. This is why the JS Thread must be optimized to avoid long delays in execution.
• Notably, some components like NavigatorIOS and ScrollView run completely on the UI Thread, which prevents them from being blocked by slow JS thread operations.

Native Modules Thread

The Native Modules Thread comes into play when the app needs to access platform-specific APIs (e.g., camera, GPS). This thread allows React Native to call native functions from Android or iOS directly, bridging the gap between JavaScript and native code.

Render Thread (Android Only)

In Android (specifically for version L and later), the Render Thread is responsible for generating OpenGL commands used to draw the UI. The Render Thread enables the app to efficiently render graphics and images on the screen.

Process Involved in Working of React Native

React Native works by following a sequence of processes from app startup to rendering:

1) App Startup

On app startup, the main thread is used for executing and loading the JavaScript bundles. The JS bundles have the app's logic and UI components.

2) JavaScript Execution

After the successful loading of the JavaScript bundle, the JS Thread takes over the execution. This enables the JS Thread to execute the heavy computations without influencing the UI Thread, which keeps the user interface responsive.

3) Virtual DOM and Reconciliation

React Native employs Reconciliation to effectively render UI updates. The Reconciler then contrasts the current virtual DOM with the new virtual DOM ("diffing"), and where there are updates to be made, sends them off to the Shadow Thread.

4) Layout Calculation

The Shadow Thread determines the layout of the UI components and passes the layout parameters to the UI Thread. "Shadow" in this case is the virtual UI that is created during this calculation. The layout consists of position, size, and other characteristics of UI components.

5) Screen Rendering

As only the UI Thread is allowed to display UI on the screen, the layout data computed by the Shadow Thread is dispatched to the UI Thread. The UI Thread renders the final result on the screen and displays it to the user.

Parts of React Native

React Native can broadly be divided into three primary parts:

React Native - Native Side

The native side comprises the native modules and views that belong to the Android or iOS platform. It contains features such as the native UI and platform-specific APIs.

React Native - JS Side

The JS side is where the JavaScript code executes. This is the code you, as a developer, write using React and JavaScript. It handles app logic, state, events, and UI rendering.

React Native - Bridge

The Bridge provides a communication mechanism between the JS side and native side. Asynchronous communication is supported, meaning that JavaScript and native code will not block either thread. It enables sending updates, data, and events from JavaScript to native modules.

Must Read:

• React Native
• React Native Components
• Debugging in React Native

Conclusion

React Native is a powerful framework through which developers can create mobile apps with the help of JavaScript. By utilizing several threads (UI, JS, Native Modules, and Render Thread) and streamlined processes for rendering, React Native achieves high performance and responsiveness. Knowing the React Native flow—from loading the JavaScript bundle to the rendering of UI updates—will make you write more efficient code and improve your app's performance.

By dividing React Native into three components—native side, JS side, and the bridge—this architecture enables smooth interaction between native code and JavaScript code, offering the best of both worlds.