React Native Architecture

As a developer, whether you're just starting with React Native or have years of experience, understanding its architecture is paramount. A deep grasp of React Native's structure is essential for building applications efficiently, debugging issues, and ensuring your codebase is maintainable and scalable.

I have divided the blog in to different sections , as it will be easier to learn small parts first and get the big picture at last

1. Threads in React Native: Understand the JavaScript, Native/UI, and Shadow threads that power React Native's architecture 1.

2. Rendering in React Native: Fabric rendering system, does UI rendering and layout calculations

3. Cross Platform Working in React Native: Learn how React Native achieves seamless cross-platform compatibility and the role of the C++ core in enhancing interoperability

4. Understanding Hermes and Native Modules: Dive into Hermes, a JavaScript engine optimized for React Native, and Native Modules, which bridge JavaScript and native code, enhancing performance and integration

Now lets understand them one by one

1. Threads in React Native

• Main Thread : This thread is responsible for rendering the UI and handling user interactions. It manages the native views and modules, which integrate native platform features into the app
• Shadow Thread :The Shadow thread is responsible for transforming the layout from the JavaScript code into a format that can be understood by the native platforms using the Yoga layout engine.
• JS Thread : This thread runs the JavaScript code, including React's render phase and layout. The JS thread is where React's operations are executed, and it communicates with the UI thread through the Bridge

2. Rendering in React Native

The React Native re-render goes through a sequence of work to render React logic to a host program. This sequence of work is called the render pipeline

Render -> Commit -> Mount

• Render : The render synchronously creates a React Shadow Node the <View> leads to the creation of a ViewShadowNode object, and the <Text> leads to the creation of a TextShadowNode object. Notably, there is never a React Shadow Node that directly represents <MyComponent>

• Commit: The commit phase consists of two operations: Layout Calculation and Tree Promotion. Layout Calculation - Calculates position & size of each React Shadow Node using Yoda Tree Promotion - represents the latest state of the React Element Tree

• Mount: The mount phase transforms the React Shadow Tree (which now contains data from layout calculation) into a  Host View Tree with rendered pixels on the screen.