How React Native Works?

While the vogue of using React Native for developing IOS and Android apps is progressively growing, it is both interesting and imperative to understand what exactly React Native is and how does it work? React Native is a JavaScript framework for writing natively rendering mobile applications for IOS and Android. It’s based on React, a JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms.It renders using its host platform’s standard rendering APIs enabling it to stand out from most existing methods of cross-platform application development.

React Native allows for building a single app and releasing it for both Android and IOS which affect the user experience and performance of the app. Components in React are composable, reusable and can consist of other components and/or of primitives. React detects which components need to be re-rendered based on the changes in the data, and which not. This makes it fast, powerful and an exceedingly popular choice for development of web applications.

There are 4 threads in the React Native App, as under:

1.      Main thread/ UI thread(used for native android or IOS UI rendering)

2.      JS thread(executes application’s JavaScript code, makes API calls and processes touch events)

3.      Native Module thread(provides access to platform API)

4.      Render thread(generates actual Open GL commands used to draw UI in Android)

So, when you first start React Native app, its main thread starts execution and starts loading JS bundles. 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 any time.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. It is called shadow because it generates shadow nodes. Since only the main thread can render something on the screen, shadow thread should send generated layout to the main thread, and only then UI renders.

Both IOS and Android have a similar architecture with subtle differences. Understanding how React Native works is to know the three-part separation of React Native into:

1. The Native side: Most of the native code in case of IOS is written in Objective C or Swift, while in the case of Android it is written in Java. But for writing our React Native app, you would barely ever need to write native code for IOS or Android.

2.The JS side: On IOS/Android simulators and devices React Native uses JavaScript Core, which is the JavaScript engine that powers Safari.With IOS, React Native uses the Java Script Core provided by the IOS platform; while with Android, React Native bundles the Java Script Core along with the application. This increases the app size. 

3.The Bridge: React Native bridge is a C++/Java bridge which is responsible for communication between the native and Javascript thread. A custom protocol is used for message passing. The Native thread spawns the JS VM thread which runs the bundled JS code. The JS code has all the business logic of the application. The Native thread now sends messages via the RN Bridge to start the JS application. Now, the spawned Javascript thread starts issuing instructions to the native thread via the RN Bridge. The instructions include what views to load, what information is to be retrieved from the hardware, etc.