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

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

Posted by: admin April 23, 2020 Leave a comment


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?

How to&Answers:

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.


On iOS simulators and devices, Android emulators and devices React Native uses JavaScriptCore which is the JavaScript engine that powers Safari.


To run Javascript code

React Native uses JavaScriptCore (JavaScript engine that powers 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 with Android/ iOS

React Native bridge (C++/Java bridge) is used. It is responsible for communication between the native and Javascript thread.

In most cases, a developer would write the entire React Native application in Javascript. To run the application one of the following commands are issued via the CLI – react-native run-ios or react-native run-android. At this point, React Native CLI would spawn a node packager/bundler that would bundle the JS code into a single main.bundle.js file. The packager can be considered as being similar to Webpack. Now, whenever the React Native app is launched, the first item to be loaded is the native entry point. 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.