How react native works? [closed]

Question

Can someone explain how react native works?

Found a lot of good articles about getting started, components usage, exporting modules.. but,

Googling about how react native works doesn't really help, but this article http://tadeuzagallo.com/blog/react-native-bridge that explains how native modules are exported and what happens when javascript calls them.

.. Still I find it difficult to understand (as a javascript dev) things like, how first render happens on the screen, what are the functions of those 3 threads and how they communicate with each other, what is this javascript event loop, why do we need batched calls and how it is batched, etc..,

Can someone share an article/explain it in a javascript developer perspective?

thanks!

Answer 1

I will try to describe how React Native works. It's a bit complicated.

And first of all I will like to recommend this URL to learn about basics internal mechanism of React Native:

Read: https://www.reactnative.guide/3-react-native-internals/3.1-react-native-internals.html

So you are writing code in JS/JSX (JavaScript) or TS/TSX (TypeScript) but Android uses primarily Java (for sake of this answer, we know it's Kotlin now) and iOS use Swift/Objective-C so how the java script code is running in your Java Virtual Machine or Dalvik Virtual Machine or whatever iOS use.

So here is the problem how to run JavaScript code in Android Machine (iOS machine),

1) Use WebView, but WebView is slow, there is a lot going on in a WebView, so much heavy lifting is done for you by the Android/IOS Machine to run Web Pages in your application. Page loads slowly, scrolling jerks and what not. That's why Cordova and PhoneGap apps don't work well.

2) We don't need WebView right, we need light-weight JavaScript compiler(interpreters) which can compile only a set of JS instructions not all of them. A program which targets only core JavaScript and read new defined XML/ReactNative tags. React-Native tags (Image, FlatList, Text etc) are converted on JS side and converted to JS methods calls not on Android/IOS side.

Read: https://reactjs.org/docs/react-without-jsx.html JSX is first converted to JS first.

3) Here, JavaScript-Virtual Machine comes into play which is completely different from JVM or DVM. And can run on JVM or DVM.

React Native uses : JavaScriptCore

Read: https://www.raywenderlich.com/1227-javascriptcore-tutorial-for-ios-getting-started (This is for IOS)

Here is one and open source for you to look around

https://github.com/LiquidPlayer/LiquidCore: This is even contains a file system, react-native does not.

Note: Same idea FB used for NodeJs = backend JavaScript.

4) JS-Bundle: So now you can run JS code in your application, but how do you ship it. You will create one file i.e merge of the all the files and library files into one and call it JS-Bundle.

Simple command for Android

node node_modules/react-native/local-cli/cli.js bundle --entry-file index.js --platform android --bundle-output ../jsbundle/index.android.jsbundle --assets-dest ../jsbundle/res

5) JS-Bridge: Like the name provides bridge methods and components to communicate JavaScript and Native-Code(Android Java). How do they communicate, like everything else in React-Native, using JSON. JSON commands are sent to UiManager in native code to create UI on an asynchronous thread, which adds these commands into MessageQueue and process them.

Read: https://hackernoon.com/understanding-react-native-bridge-concept-e9526066ddb8

Also Read : https://tadeuzagallo.com/blog/react-native-bridge/

6) Threads:

• JS-Thread : Handles UI commands as explained earlier. JS thread is created as soon you invoke React-Native view from Android Code (Starting React Activity) and handles every view create or change command from React Native.
• Native-Thread(Main Thread): Take press or touch events and pass them to JS-VM, JS-VM passes them to your code, if success , process them and View change events are passed to your JS-Thread.
• Async-Threads Now I don't have much idea about how do you create threads inside your JS/JSX code. Maybe it's possible but before it was not.

So for a JS point view your writing JS code that will run on light weight browser that is ReactView.

Read: https://www.codementor.io/@saketkumar95/how-react-native-works-mhjo4k6f3