Behind the Scenes of a React Native App: A Deep Dive

React Native Logo

Hey React enthusiasts! Ever created a dazzling React Native app and wondered what goes on under the hood? Let’s peek into the kitchen and see how these apps come to life! ‍

Threads: The Busy Cooks of React Native

Imagine your React Native app as a bustling kitchen. Instead of chefs, we have multiple threads, each playing a crucial role:

UI Thread (Main Thread): The head chef, this thread handles all the UI rendering magic. In the world of Android, it’s responsible for the nitty-gritty of measuring, laying out, and drawing everything on the screen.

// (UI Thread - Pseudocode)
function drawUI() {
// Measure elements on the screen
const measurements = measureElements();
// Layout elements based on measurements
layoutElements(measurements);
// Draw the UI based on the layout
renderUI();
}

JS Thread (JavaScript Thread):

This is where the real cooking happens! Think of it as the sous chef, meticulously preparing the main ingredients. The JS thread runs your app’s JavaScript code, handles API calls, and processes user interactions like touch events. Updates to the UI are prepared in batches and sent to the head chef (UI Thread) for final rendering. The key here is speed: the JS thread needs to send these updates before the next frame is displayed on screen.

For example, iOS aims for 60 frames per second, which means a new frame every 16.67ms. If your JS thread takes longer than that, the UI will look choppy or sluggish.

Bonus fact: Some views, like navigatorIOS and scrollview, run entirely on the UI thread, so they’re not affected by a slow JS thread.

Native Modules Thread:

Sometimes, your app needs to access features specific to the device’s operating system (Android or iOS). This specialized chef handles those interactions, whipping up unique dishes using platform-specific APIs.

Render Thread (Android L Only):

On Android devices running Lollipop (version 5.0) or above, this thread takes care of generating the fancy OpenGL commands needed to draw your UI on the screen. Imagine it as the artistic chef who plates your food to perfection!

The App Comes to Life: A Step-by-Step Recipe

Let’s follow the journey of your app from launch to rendering the UI:

1. App Launch: The main thread wakes up first thing in the morning and starts loading the JavaScript bundles, just like prepping the ingredients.
2. JS Execution: Once the JS code is loaded, it moves to the JS thread, ensuring the UI thread stays free to handle any incoming user interactions. This keeps the app responsive even during heavy calculations.
3. Rendering Starts: React, the master chef, begins the rendering process. The “reconciler” compares the old UI with the new one and generates a fresh virtual DOM (layout), like a blueprint for the final dish. Changes are then sent to the shadow thread.
4. Shadow Thread: This thread acts like a meticulous sous chef, calculating the exact layout based on the virtual DOM. The layout parameters are then sent to the main (UI) thread.

It’s called the “shadow” thread because it creates temporary “shadow nodes” — like a hidden workspace where the layout prep happens — just like a shadow chef prepping behind the scenes..

5. UI Rendering: The main thread takes the final layout information from the shadow thread and renders it on the screen. Only the main thread can do the actual UI update, ensuring a smooth and efficient presentation.

With these threads working in harmony, let’s now explore the three main parts that make up React Native.

The Three Pillars of React Native

We can break down React Native into three key components that work together seamlessly:

1. Native Side: This is the foundation of your app, interacting directly with the device’s native APIs. Think of it as the kitchen itself, with all the tools and equipment needed to prepare the dishes.
2. JS Side: This is where your JavaScript code resides, bringing logic and interactivity to life. It’s like the recipe book containing all the instructions for creating the amazing app.
3. Bridge: The bridge acts as the communication channel between the native side and the JS side. It ensures these two sides can talk to each other effortlessly, just like a well-coordinated team of chefs working together.

These three parts, often referred to as “The 3 Parts of React Native,” are the secret recipe for building fantastic React Native apps. Understanding how they interact is essential for mastering this powerful framework.