Learn about the architecture of React Native

If you have worked with mobile app, then surely you are no stranger to React Native names. It is an open-source or Cross-Platform created by Facebook that allows developers to build and deploy an Android and iOS application quickly and powerfully. In the past, to build an application running on two platforms, Android and IOS, companies or individuals must have enough manpower or experience with both Android (Java / Kotlin) and IOS (Swift / Objective-C). can be built. React Native was born to solve the problem of cost, resources as well as time in the process of building a cross-platform application.

React Native is built with the combination of 2 main components: React and Native. React is a Facebook framework that allows for optimized and flexible UI building. Native is the SDKs of the two platforms Android and iOS develop. React Native provides us with two ways to build our app:

• Expo CLI
• React Native CLI

In this article, I will not talk much about the basics or the setup or build apps with React Native anymore but will focus on an advanced concept that is Native Module, a very important component in React Native. To work with the Native Module, programmers are required to have knowledge of working with Java / Kotlin and Swift / Objective-C because we will have to work a lot with the SDK, handling the hardware as well as the operating system. The main ingredients you need to consider:

Android

• Activities
• Services
• Broadcast Receivers
• Content Providers
• Room / SQLite
• Intents
• Fragments
• ListView
• Retrofit
• Hardware related SDKs such as Camera , Map , Audio & Video , …

IOS

• Viewcontroller
• UIView
• UIImage
• NavigationController
• UIWebview
• CoreData / SQLite
• Network
• Hardware related SDKs such as Map Kit , Google API , Camera , AVFoundation , AVKit , …

And finally we need to have knowledge of 2 IDE Android Studio and Xcode to serve the code in the development process.

Before we start working with Native Module, let’s learn how React Native works.

When a React Native app is launched, it will have 3 main threads:

Native thread (Native Queue): This is the main thread that is instantiated the day after the application starts running. It is responsible for activating the Javascript thread to execute React code that the programmer created earlier and then sending it back to the Native thread to execute them. At the same time, this thread is also responsible for listening on screen manipulation events and sending it to the Javascript thread. Because these two threads always communicate seamlessly, when the application interface needs updating, the implementation is quite fast.

Javascript thread (JS Queue): This thread is responsible for executing and encapsulating the app’s business logic javascript code and then sent to Native thread.

Shadow thread : This is where it recalculates the layout of the interface displayed on your app screen. Facebook uses a tool called Yoga to perform this computation and sends it back to the Native thread for display on the screen.

Before releasing app androdi or ios with react-native we usually run 2 npx react-native run-android --variant=release or npx react-native run-ios --configuration Release . This process will package all your javascript code into one file, main.bundle.js with NodeJS NPM. When an app starts, the Native thread will start and then send a message through a JSI bridge that activates the Javascript thead. The Javascript thead then sends back all the UI / UX logic to display to the Native thread through JSI. JSI will call the Shadow thread and use Yoga to calculate the layout layout. Finally, JSC will send back to the Native thread to display on the application screen.

If you want to create View and Text to display on the screen, with React Native I have the following example:

On the react-native side we create a visual interface like this:

Then the JS thread will send the Native thread the following code:

[ [2,3,[2,'Text',{...}]] [2,3,[3,'View',{...}]] ]

Now with Native thread will initialize object view with Android View -> ViewManager , TextView -> TextView and IOS View -> RCTViewManager , TextView -> UITextView

For example:

• Android : Text -> new TextView(getContext())
• IOS : Text -> UITextView(frame: CGRect(x: 20.0, y: 90.0, width: 250.0, height: 100.0))

If you have worked with Android, you will not be unfamiliar with creating View like this, right?

It is an XML file that allows us to create UI on Android. Now based on the message of the JavaScript thread sent to, the Native thread will instantiate these views for us in Java / Kotlin.

summary

In this article, I showed you how React Native works and architecture. The question is whether React Native is slower than Native, the answer is Yes because 2 threads have to communicate with each other through JSI API. But this slowdown is almost negligible due to today’s team of Facebook engineers working to optimize the architecture of React Native. Since this is an advanced component in react-native, in the next article I will guide you on how to build a Native Module with Android. Thank you.