Does React Native compile JavaScript into Java for Android?

Question

When I develop hybrid apps with React Native. Does the JavaScript code I write transform into Java-Code or Java-Bytecode for the Dalvik/ART Runtime when I create an Android-App from my React Native code? Or are just the UI components compiled into native UI components? Or does a library like the Fetch API compile the JavaScript code into Java-Code or Java-Bytecode?

Answer 1

Basically, you write Javascript. The Javascript communicates with native components (Java on Android, Objective C on iOS, C# on Windows).

The communication occurs through the so-called "bridge". If at any time you feel that this communication slows things down too much, you can choose to implement the Javascript functionality in Java, Objective C or C# respectively in order to run purely native. In this case, you are writing directly in native code, so there's no Javascript to native compilation.

This will sacrifice compatibility for performance. Normally, this is not necessary.

Answer 2

The code remains the JavaScript native code and is not converted into any other format. The hybrid apps run inside the native container app which invokes JavaScript run time engine which takes care of executing the JavaScript code. I hope this clarifies the question.

Answer 3

Based on "React Made Native Easy" book:

Essentially, React Native can be considered as a set of React components, where each component represents the corresponding native views and components.

Also there is two parts in React Native architechture:

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.

2. Javascript VM: The JS Virtual Machine that runs all our JavaScript code. On iOS/Android simulators and devices React Native uses JavaScriptCore, which is the JavaScript engine that powers Safari. JavaScriptCore is an open source JavaScript engine originally built for WebKit. In case of iOS, React Native uses the JavaScriptCore provided by the iOS platform. It was first introduced in iOS 7 along with OS X Mavericks.

And for communication between these parts:

React Native Bridge: React Native bridge is a C++/Java bridge which is responsible for communication between the native and Javascript thread. A custom protocol is used for message passing.

Answer 4

reat native works as a wrapper for example if you want to put a button in your layout you simply put button tag in layout but this button come from native android button and you just use specific API from UI module called react-native. you can create your custom native module and use it in your react native project easily.

Answer 5

React Native

React -> JavaScriptCore -> Native Code -> "What you see"

Hybrid App

JavaScript -> Native WebView wrapper -> "What you see"