Hello Readers, CoolMonkTechie heartily welcomes you in this article.
In this article, we will learn about the React Native Internal architecture. We will discuss about react native internal work flow.
A famous quote about learning is :
” Try to learn something about everything and everything about something. “
So, Let’s Start.
So What about Cordova Platform and why would anyone want to use React Native?
The Primary difference between React Native and Cordova based app is that
- Cordova based apps run inside a Web View.
- React Native apps renders using Native View.
React Native Application have direct access to all the native APIs and views offered by the underlying mobile OS. React Native Applications have the same feel and performance as that of a native application.
React Native does something much more clever.Essentially React Native uses a set of React components, where each component represents the corresponding native views and components.
For example, a native TextInput will have a corresponding React Native component which can be directly imported into the JS code and used like any other React component. Hence, the developer will be writing the code just like for any other React Web app but the output will be a native application.
To understand this, let us take a look at the architecture and Threading model and how React Native works internally.
React Native uses similar architecture for iOS and Android platform. There are three parts to React Native Platform :
1. Native Code/Modules
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, we would hardly ever need to write native code for iOS or Android.
3. React Native Bridge
When a React Native application is launched, it spawns up the following threading queues:
1. Main Thread (Native Queue)
- The Native thread also listens to the UI events like ‘press’, ‘touch’ etc. These events are then passed to the JS thread via RN Bridge.
- The Shadow thread is basically like mathematical engine which finally decides on how to compute the view positions.
- These instructions are then passed back to the main thread to render the view.
- The JS thread runs all the business logic, i.e., the code we write in React Native.
3. Custom Native Modules
- Apart from the threads spawned by React Native, we can also spawn threads on the custom native modules to build to speed up the performance of the application.
- For Example – Animations are handled in React Native by a separate native thread to offload the work from the JS thread.
In this article, We understood about React Native Internal Work Flow. We conclude that React Native work flow based on the threading models and process involved between different threads. We can separate React Native into three Parts :
- React Native-Native Side
- React Native -JS Side
- React Native – Bridge
This is also called “3 Parts of React Native”.
Thanks for reading ! I hope you enjoyed and learned about Internal architecture,Threading Models and Process involved in React Native . Reading is one thing, but the only way to master it is to do it yourself.
Please follow and subscribe us on this blog and and support us in any way possible. Also like and share the article with others for spread valuable knowledge.
If you have any comments, questions, or think I missed something, feel free to leave them below in the comment box.
Thanks again Reading. HAPPY READING !!😊😊😊