Working of React Native

React Native lets developers build cross-platform mobile apps in JavaScript, running on both Android and iOS while combining web and native development.

React Native

React Native is an open-source framework developed by Facebook that enables developers to create mobile apps with JavaScript and React.

• Write code once, run on Android & iOS.
• Uses native components & APIs for real performance.
• Bridges web and mobile development efficiently.

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 (or Main Thread) handles rendering the app’s interface on Android and iOS, ensuring it stays responsive and visually smooth.

JS Thread (JavaScript Thread)

The JS (JavaScript) Thread runs the app’s logic, handles API calls and events, and coordinates with the UI Thread to update the interface smoothly at high frame rates.

• 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 handles calls to platform-specific APIs, enabling React Native to access native features like camera or GPS from JavaScript.

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:

1) 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.

2) 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.

3) React Native - Bridge

The Bridge enables asynchronous communication between JavaScript and native code, allowing data, events, and updates to pass without blocking either thread.

Must Read:

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