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.

• Further reading

Understanding React Native bridge concept

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

The best explanation i saw-

00:00 - 03:55

https://www.youtube.com/watch?v=6ZnfsJ6mM5c&t=1228s

"In react native app after compiled - all the UI(Buttons,Text...) going to get compiled to native code(Java or Objective C) and the JavaScript part is going to stay JavaScript."

For full explanation -

08:06-14:10

https://www.youtube.com/watch?v=qSRrxpdMpVc

Answer 5

React Native

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

Hybrid App

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

Answer 6

React Native works as a wrapper. For example: if you wanted to put a button in your layout, you'd simply add a button tag. You then use a specific API from the UI module to render this on Android. You can easily create custom native modules to use in your React Native projects. However, code written natively is often faster.