How React Native Works?

We might build lots of apps using React Native platform.

But what happens in the low-level code, in the native project?
Let's first know what exactly happens in the low-level code.

Threads in React Native App

There are four threads in the React Native App :

1) UI Thread: Also known as Main Thread. This is used for native android or iOS UI rendering. For example, this thread is used for android measure/layout/draw happens in android.

2) JS Thread: The JS thread or JavaScript thread is where the logic will run. E.g., this is the thread where the application's JavaScript code is executed, API calls are made, touch events are processed, and many others. Updates to native views are batched and sent over to the native side at the end of each event loop in the JS thread (and are executed eventually in the UI thread).

To maintain good performance, the JS thread should send batched updates to the UI thread before the next frame rendering deadline. For example, iOS displays 60 frames per sec, leading to a new frame every 16.67ms. If you do some complex processing in your JavaScript event loop that leads to UI changes and takes more than 16.67ms, UI will appear sluggish.

One exception is the native views that happen entirely in the UI thread. For example, navigatorIOS or scroll view runs altogether in the UI thread and is not blocked due to a slow js thread.

3) Native Modules Thread: Sometimes, an app needs access to platform API, which happens as part of the native module thread.

4) Render Thread: Only in Android L (5.0), react-native render thread is used to generate actual OpenGL commands used to draw your UI.

The process involved in working of React Native

1) At the first start of the app, the main thread starts execution and starts loading JS bundles.

2) When JavaScript code has been loaded successfully, the main thread sends it to another JS thread because when JS does some heavy calculations stuff the thread for a while, the UI thread will not suffer at all.

3) When React starts rendering, Reconciler starts "diffing", and when it generates a new virtual DOM(layout), it sends changes to another thread(Shadow thread).

4) Shadow thread calculates layout and sends layout parameters/objects to the main(UI) thread. ( Here, you may wonder why we call it "shadow"? It's because it generates shadow nodes )

5) Since only the main thread can render something on the screen, the shadow thread should send the generated layout to the main thread and UI renders.

Separation of React Native

Generally, we can separate React Native into three parts :

1) React Native — Native side

2) React Native — JS side

3) React Native — Bridge

This is often called "The 3 Parts of React Native."