Building hybrid React apps for iOS and Android with native performance
Asked Answered
N

2

24

Is it possible to build apps for iOS and Android with Facebook's React JavaScript framework, delivering nearly the same performance as native apps?

Nigh answered 29/1, 2015 at 13:31 Comment(0)
N
45

Until January 2015, using a hybrid approach of running the React JavaScript part inside the WebView component would have been the only option, using frameworks like Apache Cordova, with the typical disadvantages this approach has. Tasks like JavaScript's garbage collection can slow down the native portion of the app, leading to skipped frames, making the app feel sluggish.

On January 28th Facebook announced the React Native project at React.js Conf 2015. React Native will be an open source project, which enables native rendering of HTML5 applications built with React for iOS and Android. React Native has been used by Facebook internally to build apps like the Facebook Groups app for iOS.

Technically React Native runs the JavaScript code for a React app in a background thread. Updates to the virtual dom are collected, and all changes are sent through an API into the native portion of the app. By doing this, React Native avoids slowing down the FPS rate of the app by making the app wait for unfinished JavaScript operation.

Facebook announced that the source code for React Native will be available on Github shortly after React.js Conf 2015. Conference participants will have access to the Github repository on January 29th 2015 already.

Update: The 2nd presentation video with some technical details React.js Conf 2015 Keynote 2 - A Deep Dive into React Native is up on Youtube now. During the presentation Facebook announced that the source code for the layout and box model engine rendering for both iOS and Android is available on Github in the following repository: github.com/facebook/css-layout

The iOS version of the animation library used for React Native is hosted at https://github.com/facebook/pop

Update 2: Source code available on Github now The React Native source code is available now https://github.com/facebook/react-native.

Update 3: React team released Android support in Sept 2015 https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/

The instructions to get started with React Native Android development can be found here: https://facebook.github.io/react-native/docs/android-setup.html

Nigh answered 29/1, 2015 at 13:31 Comment(6)
Right now only the Youtube video is available, as soon as source code is available, the link to the source code and documentation will be added.Nigh
I've seen the video and there was android mentioned as well but never really a timeline (or how at least about the current progress). Is there more information out there?Gwendolin
There is already some source code online for Android support in the css-layout module on Github. I haven't heard anything about a timeline for a release of an alpha version of React Native with Android support.Nigh
too bad. The multiplatform approach really got me interessted :/Gwendolin
The source code is available now, ready to play. github.com/facebook/react-nativeNigh
Right, they are still working on the Android version. On March 30th the React Native team said: When is React Native Android coming? Give us 6 months. At Facebook, we strive to only open-source projects that we are using in production. While the Android backend for React Native is starting to work (see video below at 37min), it hasn't been shipped to any users yet.Nigh
S
0

As said above, you can use React Native for iOS only.

If you want to use React for both platforms:

  • Check out Reapp (http://reapp.io/). It´s a React + Javascript Framework for building iOS & Android Apps with cool features.
  • Maybe give Touchstone (http://touchstonejs.io/) a try. Basically: React + Cordova + HTML5/CSS3 UI. Docs are coming soon, too.
Sedillo answered 13/8, 2015 at 10:51 Comment(1)
Android is supported now, since September 2015.Nigh

© 2022 - 2024 — McMap. All rights reserved.