70

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?

tanguy_k
  • 8,999
  • 4
  • 46
  • 50
unlimited101
  • 3,251
  • 4
  • 19
  • 35

6 Answers6

93

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

Youssef AbouEgla
  • 732
  • 5
  • 18
Marc
  • 6,014
  • 5
  • 37
  • 58
  • 3
    Best answer cause it's so descriptive. Thank ya. Did you make any performance comparisons between JavaScript logic and Java logic? E.g. have you run network request through e.g. Fetch Api and compared the runtime with e.g. retrofit? Of course this depends more on network speed than on "local" speed. Maybe you made other performance comparisons e.g. fetching the camera object natively and through JavaScript? – unlimited101 Dec 14 '16 at 06:57
  • 1
    It's not hybrid in the sense of something like Ionic, where you're essentially running web-style JS in a webview. In React Native, the Javascript is communicating with Java or Objective C and creating native elements. Native can mean different things depending on where you are — this section of this talk helped me understand it better (I recommend the rest of the talk, too): https://youtu.be/tWitQoPgs8w?t=318 – Nabha Oct 31 '18 at 15:39
  • 1
    So, the bridge is essentially a JS interpreter, right? – pavi2410 Jan 20 '20 at 06:11
25

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.

Gurdev Singh
  • 1,864
  • 11
  • 10
  • 1
    Okay. Can you tell me where you have this information from? – unlimited101 Dec 13 '16 at 15:12
  • 2
    https://facebook.github.io/react-native/docs/javascript-environment.html – Gurdev Singh Dec 13 '16 at 15:42
  • 5
    React native is not hybrid! – arled Jun 13 '18 at 13:11
  • How does it differs from react? – Offenso Sep 11 '18 at 18:29
  • @Led they are hybrid - they are controlled via javascript - which is not native. The javascript code generates native components and interfaces with native features. However the code you write is NEVER converted into actual native language, e.g. it never turns your react code into java or swift - thus its hybrid. IF the code when compiled converted every line of javascript into kotlin or something, then yes 100% native, but this is not 100% native, thus hybrid :) – Owen Apr 01 '19 at 08:42
  • 1
    @Owen React Native is cross platform not hybrid. There's a difference my friend. – arled Apr 02 '19 at 12:54
  • 3
    @Led I think maybe your definition of hybrid is different to the rest of the world. Buzzwords aside Hybrid basically means "a bit of both" React is javascript, React Native Bridge is C/Java - that is a bit of javascript, and a bit of native. Thus hybrid, Just like Hybrid cars, they are a bit electric, a bit gas. If your understanding of "hybrid" means only webviews, then correct, it does not use webviews. However it's still not fully native, which would fall into hybrid - which 90% of are all cross platform anyway – Owen Apr 02 '19 at 13:46
9

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.

Morteza Ziyae
  • 1,887
  • 4
  • 25
  • 44
5

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

enter image description here

Barak
  • 334
  • 4
  • 19
2

React Native

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

Hybrid App

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

smoosh911
  • 406
  • 4
  • 7
1

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.

insipidlight
  • 17
  • 2
  • 5
N.SH
  • 19
  • 2