Does React Native compile JavaScript into Java for Android?












32














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?










share|improve this question





























    32














    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?










    share|improve this question



























      32












      32








      32


      7





      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?










      share|improve this 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?







      javascript java android react-native react-native-android






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Apr 12 at 0:51









      tanguy_k

      6,12322939




      6,12322939










      asked Dec 13 '16 at 15:06









      unlimited101

      1,27531229




      1,27531229
























          4 Answers
          4






          active

          oldest

          votes


















          46














          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.






          share|improve this answer

















          • 2




            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 6:57










          • So it isn't native but hybrid, right?
            – Offenso
            Sep 11 at 18:27






          • 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): youtu.be/tWitQoPgs8w?t=318
            – Nabha
            Oct 31 at 15:39





















          17














          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.






          share|improve this answer

















          • 1




            Okay. Can you tell me where you have this information from?
            – unlimited101
            Dec 13 '16 at 15:12






          • 1




            facebook.github.io/react-native/docs/…
            – Gurdev Singh
            Dec 13 '16 at 15:42






          • 2




            React native is not hybrid!
            – Led
            Jun 13 at 13:11










          • How does it differs from react?
            – Offenso
            Sep 11 at 18:29



















          0














          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.






          share|improve this answer





























            0














            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.







            share|improve this answer





















              Your Answer






              StackExchange.ifUsing("editor", function () {
              StackExchange.using("externalEditor", function () {
              StackExchange.using("snippets", function () {
              StackExchange.snippets.init();
              });
              });
              }, "code-snippets");

              StackExchange.ready(function() {
              var channelOptions = {
              tags: "".split(" "),
              id: "1"
              };
              initTagRenderer("".split(" "), "".split(" "), channelOptions);

              StackExchange.using("externalEditor", function() {
              // Have to fire editor after snippets, if snippets enabled
              if (StackExchange.settings.snippets.snippetsEnabled) {
              StackExchange.using("snippets", function() {
              createEditor();
              });
              }
              else {
              createEditor();
              }
              });

              function createEditor() {
              StackExchange.prepareEditor({
              heartbeatType: 'answer',
              autoActivateHeartbeat: false,
              convertImagesToLinks: true,
              noModals: true,
              showLowRepImageUploadWarning: true,
              reputationToPostImages: 10,
              bindNavPrevention: true,
              postfix: "",
              imageUploader: {
              brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
              contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
              allowUrls: true
              },
              onDemand: true,
              discardSelector: ".discard-answer"
              ,immediatelyShowMarkdownHelp:true
              });


              }
              });














              draft saved

              draft discarded


















              StackExchange.ready(
              function () {
              StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f41124338%2fdoes-react-native-compile-javascript-into-java-for-android%23new-answer', 'question_page');
              }
              );

              Post as a guest















              Required, but never shown

























              4 Answers
              4






              active

              oldest

              votes








              4 Answers
              4






              active

              oldest

              votes









              active

              oldest

              votes






              active

              oldest

              votes









              46














              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.






              share|improve this answer

















              • 2




                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 6:57










              • So it isn't native but hybrid, right?
                – Offenso
                Sep 11 at 18:27






              • 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): youtu.be/tWitQoPgs8w?t=318
                – Nabha
                Oct 31 at 15:39


















              46














              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.






              share|improve this answer

















              • 2




                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 6:57










              • So it isn't native but hybrid, right?
                – Offenso
                Sep 11 at 18:27






              • 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): youtu.be/tWitQoPgs8w?t=318
                – Nabha
                Oct 31 at 15:39
















              46












              46








              46






              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.






              share|improve this answer












              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.







              share|improve this answer












              share|improve this answer



              share|improve this answer










              answered Dec 13 '16 at 18:18









              Marc

              2,38242444




              2,38242444








              • 2




                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 6:57










              • So it isn't native but hybrid, right?
                – Offenso
                Sep 11 at 18:27






              • 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): youtu.be/tWitQoPgs8w?t=318
                – Nabha
                Oct 31 at 15:39
















              • 2




                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 6:57










              • So it isn't native but hybrid, right?
                – Offenso
                Sep 11 at 18:27






              • 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): youtu.be/tWitQoPgs8w?t=318
                – Nabha
                Oct 31 at 15:39










              2




              2




              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 6:57




              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 6:57












              So it isn't native but hybrid, right?
              – Offenso
              Sep 11 at 18:27




              So it isn't native but hybrid, right?
              – Offenso
              Sep 11 at 18:27




              1




              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): youtu.be/tWitQoPgs8w?t=318
              – Nabha
              Oct 31 at 15:39






              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): youtu.be/tWitQoPgs8w?t=318
              – Nabha
              Oct 31 at 15:39















              17














              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.






              share|improve this answer

















              • 1




                Okay. Can you tell me where you have this information from?
                – unlimited101
                Dec 13 '16 at 15:12






              • 1




                facebook.github.io/react-native/docs/…
                – Gurdev Singh
                Dec 13 '16 at 15:42






              • 2




                React native is not hybrid!
                – Led
                Jun 13 at 13:11










              • How does it differs from react?
                – Offenso
                Sep 11 at 18:29
















              17














              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.






              share|improve this answer

















              • 1




                Okay. Can you tell me where you have this information from?
                – unlimited101
                Dec 13 '16 at 15:12






              • 1




                facebook.github.io/react-native/docs/…
                – Gurdev Singh
                Dec 13 '16 at 15:42






              • 2




                React native is not hybrid!
                – Led
                Jun 13 at 13:11










              • How does it differs from react?
                – Offenso
                Sep 11 at 18:29














              17












              17








              17






              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.






              share|improve this answer












              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.







              share|improve this answer












              share|improve this answer



              share|improve this answer










              answered Dec 13 '16 at 15:10









              Gurdev Singh

              1,531610




              1,531610








              • 1




                Okay. Can you tell me where you have this information from?
                – unlimited101
                Dec 13 '16 at 15:12






              • 1




                facebook.github.io/react-native/docs/…
                – Gurdev Singh
                Dec 13 '16 at 15:42






              • 2




                React native is not hybrid!
                – Led
                Jun 13 at 13:11










              • How does it differs from react?
                – Offenso
                Sep 11 at 18:29














              • 1




                Okay. Can you tell me where you have this information from?
                – unlimited101
                Dec 13 '16 at 15:12






              • 1




                facebook.github.io/react-native/docs/…
                – Gurdev Singh
                Dec 13 '16 at 15:42






              • 2




                React native is not hybrid!
                – Led
                Jun 13 at 13:11










              • How does it differs from react?
                – Offenso
                Sep 11 at 18:29








              1




              1




              Okay. Can you tell me where you have this information from?
              – unlimited101
              Dec 13 '16 at 15:12




              Okay. Can you tell me where you have this information from?
              – unlimited101
              Dec 13 '16 at 15:12




              1




              1




              facebook.github.io/react-native/docs/…
              – Gurdev Singh
              Dec 13 '16 at 15:42




              facebook.github.io/react-native/docs/…
              – Gurdev Singh
              Dec 13 '16 at 15:42




              2




              2




              React native is not hybrid!
              – Led
              Jun 13 at 13:11




              React native is not hybrid!
              – Led
              Jun 13 at 13:11












              How does it differs from react?
              – Offenso
              Sep 11 at 18:29




              How does it differs from react?
              – Offenso
              Sep 11 at 18:29











              0














              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.






              share|improve this answer


























                0














                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.






                share|improve this answer
























                  0












                  0








                  0






                  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.






                  share|improve this answer












                  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.







                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Oct 10 at 7:08









                  N.SH

                  11




                  11























                      0














                      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.







                      share|improve this answer


























                        0














                        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.







                        share|improve this answer
























                          0












                          0








                          0






                          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.







                          share|improve this answer












                          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.








                          share|improve this answer












                          share|improve this answer



                          share|improve this answer










                          answered Nov 22 at 18:09









                          Morteza Ziaeemehr

                          1,27542040




                          1,27542040






























                              draft saved

                              draft discarded




















































                              Thanks for contributing an answer to Stack Overflow!


                              • Please be sure to answer the question. Provide details and share your research!

                              But avoid



                              • Asking for help, clarification, or responding to other answers.

                              • Making statements based on opinion; back them up with references or personal experience.


                              To learn more, see our tips on writing great answers.





                              Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


                              Please pay close attention to the following guidance:


                              • Please be sure to answer the question. Provide details and share your research!

                              But avoid



                              • Asking for help, clarification, or responding to other answers.

                              • Making statements based on opinion; back them up with references or personal experience.


                              To learn more, see our tips on writing great answers.




                              draft saved


                              draft discarded














                              StackExchange.ready(
                              function () {
                              StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f41124338%2fdoes-react-native-compile-javascript-into-java-for-android%23new-answer', 'question_page');
                              }
                              );

                              Post as a guest















                              Required, but never shown





















































                              Required, but never shown














                              Required, but never shown












                              Required, but never shown







                              Required, but never shown

































                              Required, but never shown














                              Required, but never shown












                              Required, but never shown







                              Required, but never shown







                              Popular posts from this blog

                              What visual should I use to simply compare current year value vs last year in Power BI desktop

                              Alexandru Averescu

                              Trompette piccolo