FB open-sources React Native, using JS to develop native iOS apps

Facebook today officially open-sourced the React Native library, which is now available for download on GitHub. Currently, there is only an iOS version, but the Android version will soon be open-sourced. Developers can use JavaScript and Facebook's React library to develop native iOS and Android applications. At the same time, Facebook also open-sourced Nuclide, an IDE for React Native, web, and native mobile development. Nuclide is built on Atom and has an active community to support it.

React Native uses Javascript to compile the app into a native application view, providing a familiar look and feel on iOS and Android devices. React Native is not like the web wrapper you have used before, and its code behaves almost like a native application.

Facebook has used React Native to develop its major applications, such as Facebook Groups, which uses React Native to render most of its views. The company said that React and React Native allow developers to easily and efficiently write code for any platform by learning only one language. And Facebook will continue to invest in React Native.

Facebook's announcement of the open source project is quite exciting for many developers. Previously, Facebook has open sourced many of its own projects, such as the previous network testing tool Augmented Traffic Control (ATC), the animation engine POP, and the fine-tuning tool Tweaks.

React Native features include:

Native iOS components

Developers can use standard platform components, such as UITabBar and UINavigationController on the iOS platform, so that the developer's application has a consistent appearance and experience with the native platform and maintains a high quality. These components can be easily incorporated into the developer's application.

 var React = require( 'react-native' );
 var { TabBarIOS, NavigatorIOS } = React;
 var App = React.createClass({
 render: function () { 
     return (
 <tabbarios>
        <tabbarios.item title= "react native" selected={ true }>
          <navigatorios initialroute={{ title: 'react native' }} >
        </navigatorios initialroute={{ title: 'react native' }} >
      </tabbarios.item title= "react native" selected={ true }>
 );
 },
 });</tabbarios>

Asynchronous Execution

All operations between JavaScript application code and native platforms are performed asynchronously, and native modules can also use additional threads, which means that developers can decode main thread images and save them to disk in the background, and text and layout estimation calculations will not block the UI, etc. Therefore, the fluency and responsiveness of React Native app are very good. Communication is also fully serializable, which allows developers to use Chrome Developer Tools to debug JavaScript when running a complete application, either in the simulator or on a real machine.

Touch handling

iOS has a very powerful system, the Responder Chain, which can be used to respond to events in complex view hierarchies, but there is no similar web tool. React Native implements a similar response system and provides high-level components, such as TouchableHighlight, that can be properly integrated with scroll views and other elements without additional configuration.

 var React = require( 'react-native' );
 var { ScrollView, TouchableHighlight, Text } = React;
 var TouchDemo = React.createClass({
 render: function () { 
     return (
 <scrollview>
        <touchablehighlight onpress={() => console.log( 'pressed' )}>
          <text>Proper Touch Handling</text>
        </touchablehighlight onpress={() =>
 </scrollview>
 );
 },
 });

Flexbox and Styling

Laying out views should be simple, so we brought the flexbox module from the web platform to React Native. Flexbox can be used to build the most common UI layouts, such as stacking and embedding with alternate margins and padding. React Native also supports common web systems, such as fontWeight and StyleSheet.

 var React = require( 'react-native' );
 var { Image, StyleSheet, Text, View } = React;
 var ReactNative = React.createClass({
 render: function () { 
     return (
      <view style={styles.row}>
        <img = "" style= "{styles.image}" source= "{{uri: 'http://facebook.github.io/react/img/logo_og.png'}}" >
        <view style={styles.text}>
          <text style={styles.title}>
 React Native
          </text style={styles.title}>
          <text style={styles.subtitle}>
            Build high quality mobile apps using React
          </text style={styles.subtitle}>
        </view style={styles.text}>
      </view style={styles.row}>
 );
 },
 });
 var styles = StyleSheet.create({
  row: { flexDirection: 'row' , margin: 40 },
  image: { width: 40, height: 40, marginRight: 10 },
  text: { flex: 1, justifyContent: 'center' },
  title: { fontSize: 11, fontWeight: 'bold' },
 subtitle: { fontSize: 10 },
 });

Scalability

React Native lets you create an amazing app without writing a single line of native code, and it's extensible through custom native views and modules - meaning you can reuse anything you've already done, and import and use your favorite native libraries.

For more detailed information about React Native, see the following resources:

GitHub homepage: https://github.com/facebook/react-native

Documentation support page: http://facebook.github.io/react-native/

Introduction to Nuclide: http://nuclide.io/

Facebook open source project display: https://code.facebook.com/projects/