How To Understand React Native Internals Easy Way 2024

How to Understand react native internals architecture? You’ll also learn to react native threads and react native bridge concepts. React native is becoming increasingly popular today, and mobile developers use it to create their applications. See what React Native is and how it functions on various platforms.

Facebook invented React Native in 2015. When faced with the challenge of rendering React web apps on mobile devices, developers developed it in JavaScript. As a result of its attributes and powers, and performance, it quickly gained popularity. The Facebook team initially created React native to allow developers to use the React JS library to build natively rendered Android and iOS mobile apps. Then, because of the framework’s open environment, programmers worldwide contributed to it and increased its functionalities. Facebook apply React Native in their main Facebook app, the Ads Manager app, Facebook Analytics, and Instagram.

What is react native?

React native is an open-source javascript framework used for cross-platform mobile development like Android or IOS. The uniqueness of react native app development is that we utilize the same javascript code base to develop mobile platforms.

For example, to create a view in Android, we use java or Kotlin; in IOS development, we use swift or objective-c. In React Native, we can develop Views using javascript using the react components. At the runtime, it transforms the react components we make into corresponding native Android or IOS views. Hence, we called these types of elements as Native Components.

According to your unique needs, developers can also develop native components suited to the platform, which is Android or IOS.

Below are some of the native components you will mainly be working on.

How to Understand React Native Internals?

Before diving into these, you should know “what is javascript Virtual Machine”?

It’s the JS Virtual Machine that our bundled JS code runs. For Android, we use Javascript Core. An open-source javascript engine built initially for Webkit. For the IOS platform, they have introduced their own Javascript Core engine along with the IOS 7.

You have seen like the android application size is bigger than what is in the IOS, right? So That is because when bundling the javascript into one single file in android bundles along with the javascript core. In IOS, it’s not bundling the javascript core.

Now let’s discuss on react native bridge and how it works.

React Native Bridge

It does the communication between javascript and Native-Code(Android Java).

When we trigger the app to open, the native thread produces the javascript VM thread, which runs the javascript code with all the application’s business logic. After that native thread sends messages to the javascript thread to start the application via RN bridge. Then the JS thread starts issuing instructions to the native thread.

These instructions specify the information we should display, the information we should retrieve from hardware, etc.

The instructions are an array of JSON, and communication(asynchronous) happens via React Native bridge. So the instructions which are collected from the JS thread are sent to the UI manager in native code to create the respective UI on the asynchronous thread (Native Queue or Main thread), and these instructions are sent to MessageQueue and processed them.

React Native Threading Modal

There are three main threads that we have to be aware of;

Main Thread: When we start the application, this thread spawns. So Native code listens to the touch and press events, and the react native bridge passes these commands to the JS thread. Then JS thread sends what needs to be rendered after the javascript is loaded completely. There is another thread called the shadow node thread. It does the calculation of the layouts and view’s relative positions. Layout calculation is done by the Yoga platform provided by React Native (The actual input for this from the frontend perspective is the Flexbox that we are using for styles, but the output is the relative positions of where each element should be structured ). As you can see below, these instructions passed to the main thread to native code and rendered on the screen.
JS thread: This is the thread which our javascript code runs(the code we write on React Native)
Native modules thread: Native modules are used in cases where native capabilities are needed that react native doesn’t have a corresponding module yet, or when the native performance is better. Native modules included Views, Images as built-in components. So in IOS, every native module has its thread, and in Android, every native module shares the same thread. These are working independently to reduce the workload of the JS thread.

So as a summary, UI updates, javascript operations, and layout instructions are running on separate threads, and communication between these threads is asynchronous. You can get a clear idea of the threads from the image below.

Debugging 🔨

In the case of debugging, the javascript code runs in the Chrome itself. Instead of the javascript core on the device, it communicates the native code via Websocket. For that, it’s Using the v8 engine in Chrome. So you will notice some performance issues compared to bundles or production modes. This performance issue is because we must show warning and error messages on the console etc. Furthermore, JS code runs on Chrome, so there may be latency in communication between the JS thread and the device.

Problems With The Current Architecture

Couldn’t cancel events because of the asynchronous nature of React Native
Not giving quick responses to the UI as the communication is asynchronous and cannot do synchronous operations on UI.
Some native module features need synchronous data access. But in the current architecture, it’s not possible exactly.
The transfer of more data could be extremely slow.
The communication totally depends on the react native bridge.

Fabric Architecture

Fabric aims to rebuild the rendering layer of react-native. There are some edge cases of current react native architecture. For example, when scrolling a more extensive list, sometimes the UI is not responsive. So to overcome these types of edge cases, Fabric was introduced, allowing React Native to perform high-priority UI updates synchronously.

The main goal of this new, eagerly anticipated design is to enhance performance, bring it closer to native apps, and facilitate the integration of the React Native framework with Javascript-based hybrid frameworks.

Thank you for reading this article. I hope it helped you in some way to understand React Native internals.

For those who have an interest in react native animations here is my first article on that.