What does React Native use to allow JavaScript to be executed on iOS and Android natively?

Question

What does React Native use under the covers to interface with iOS and Android? Cordova uses a WebView to effectively display a webpage inside of a native container; Does React Native use the same approach? If not, What approach does it use?

Answer 1

As you noticed React Native is not based on Cordova. It is not a website which looks like an app shoveled into a WebView.

React Native uses a JavaScript runtime, but the UI is not HTML and it doesn't use a WebView. You use JSX and React Native specific components to define the UI.

It provides a native-level performance and look and feel but some UI parts have to be configured separately for iOS and Android. For example Toolbars are completely different, but TextInput can be the same for both Operating Systems.

Answer 2

For new update refer @f4z3k4s answer.

React Native app comprises two parts: Native part and Javascript part.

To run Javascript

React Native uses JavaScriptCore (JavaScript engine in Safari) on Android/ iOS simulators and devices.

In case of Android, React Native bundles the JavaScriptCore along with the application.

In case of iOS, React Native uses the JavaScriptCore provided by the iOS platform.

To communicate Javascript with Native part

React Native bridge is used. It is a layer that is responsible for communication between the Native and Javascript thread. It is written in C++/Java.

Steps Involved

After developer runs react-native run-ios or react-native run-android

1. React Native CLI spawns a node packager/bundler (metro) that would bundle the javascript code into a single main.bundle.js file.
2. React Native CLI launches React Native app and at first loads the native entry point of the app.
3. The Native thread spawns the JavascriptCore thread.
4. The Native thread now sends messages via the RN Bridge to start the Javascript app.
5. 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.
6. The Native thread will perform these operations and send the result back to the Javascript thread assuring that the operations have been performed.

Source