How React Native works?
Lets first know what exactly happens in the low-level code.
Threads in React Native App
There are 4 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, In android this thread is used for android measure/layout/draw happens.
One exception are the native views that happen completely in UI thread, for example, navigatorIOS or scrollview run completely in UI thread and hence are not blocked due to a slow js thread.
3) Native Modules Thread: Sometimes an app needs access to platform API, and this happens as part of 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.
Process involved in working of React Native
- At the first start of the app, the main thread starts execution and starts loading JS bundles.
- When React start rendering Reconciler starts “diffing”, and when it generates a new virtual DOM(layout) it sends changes to another thread(Shadow thread).
- Shadow thread calculates layout and then 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)
- Since only the main thread is able to render something on the screen, shadow thread should send generated layout to the main thread, and only then UI renders.
Separation of React Native
Generally, we can separate React Native into 3 parts:
- React Native – Native side
- React Native – JS side
- React Native – Bridge
This is often called “The 3 Parts of React Native”.