A framework for building native apps with React. http://facebook.github.io/react-native/
Go to file
Amjad Masad 397fb7a3fe Merge pull request #258 from lqd/patch-1
Fix a couple typos
2015-03-26 14:33:54 -07:00
Examples Update examples headers 2015-03-26 18:26:10 +00:00
IntegrationTests Updates from Thu 26 Mar 2015-03-26 06:32:01 -07:00
Libraries Update LinkingIOS.js 2015-03-26 16:51:20 +00:00
React Misc. cleanup 2015-03-26 16:46:13 +00:00
docs Fix a couple typos 2015-03-26 22:27:05 +01:00
jestSupport Second Updates from Mon 23 Mar 2015-03-23 15:07:33 -07:00
lint Second Updates from Mon 23 Mar 2015-03-23 15:07:33 -07:00
packager Bump react-native-cli version 2015-03-26 12:11:15 -07:00
react-native-cli Bump react-native-cli version actually 2015-03-26 12:13:29 -07:00
website Merge pull request #223 from zpao/website-improvements 2015-03-26 12:27:34 -07:00
.eslintignore Initial commit 2015-01-29 17:10:49 -08:00
.eslintrc Fix some lint. 2015-03-26 10:32:15 -07:00
.flowconfig Ignore website for flow 2015-03-26 09:58:59 -07:00
.gitignore Updates from Fri Feb 27 2015-03-02 10:52:16 -08:00
.travis.yml Temporarily disable xcode tests because of flakiness. 2015-03-26 09:38:15 -07:00
CONTRIBUTING.md Tweak contributors agreement 2015-03-26 10:23:15 -07:00
LICENSE Update license 2015-03-23 10:48:39 -07:00
LICENSE-CustomComponents Add CustomComponents license 2015-03-26 11:03:30 -07:00
LICENSE-docs More licenses 2015-03-24 19:59:10 -07:00
LICENSE-examples More licenses 2015-03-24 19:59:10 -07:00
PATENTS Update license 2015-03-23 10:48:39 -07:00
README.md [README] Switch to public Travis badge 2015-03-26 12:03:24 -07:00
React.podspec Fix CocoaPods spec 2015-03-26 18:25:35 +00:00
cli.js Fix few paths for react-native cli scripts 2015-03-22 14:04:55 -07:00
init.sh Update init.sh 2015-03-26 08:17:38 -07:00
linter.js Second Updates from Mon 23 Mar 2015-03-23 15:07:33 -07:00
package.json update package.json 2015-03-26 10:00:27 -07:00
runXcodeTests.sh tweak build script. 2015-03-26 09:17:17 -07:00

README.md

React Native Build Status

React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. The focus of React Native is on developer efficiency across all the platforms you care about - learn once, write anywhere. Facebook uses React Native in multiple production apps and will continue investing in React Native.

Native iOS Components

With React Native, you can use the standard platform components such as UITabBar and UINavigationController on iOS. This gives your app a consistent look and feel with the rest of the platform ecosystem, and keeps the quality bar high. These components are easily incorporated into your app using their React component counterparts, such as TabBarIOS and NavigatorIOS.

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' }} />
        </TabBarIOS.Item>
      </TabBarIOS>
    );
  },
});

Asynchronous Execution

All operations between the JavaScript application code and the native platform are performed asynchronously, and the native modules can also make use of additional threads as well. This means we can decode images off of the main thread, save to disk in the background, measure text and compute layouts without blocking the UI, and more. As a result, React Native apps are naturally fluid and responsive. The communication is also fully serializable, which allows us to leverage Chrome Developer Tools to debug the JavaScript while running the complete app, either in the simulator or on a physical device.

Touch Handling

iOS has a very powerful system called the Responder Chain to negotiate touches in complex view hierarchies which does not have a universal analog on the web. React Native implements a similar responder system and provides high level components such as TouchableHighlight that integrate properly with scroll views and other elements without any 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>
      </ScrollView>
    );
  },
});

Flexbox and Styling

Laying out views should be easy, which is why we brought the flexbox layout model from the web to React Native. Flexbox makes it simple to build the most common UI layouts, such as stacked and nested boxes with margin and padding. React Native also supports common web styles, such as fontWeight, and the StyleSheet abstraction provides an optimized mechanism to declare all your styles and layout right along with the components that use them and apply them inline.

var React = require('react-native');
var { Image, StyleSheet, Text, View } = React;

var ReactNative = React.createClass({
  render: function() {
    return (
      <View style={styles.row}>
        <Image
          source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}
          style={styles.image}
        />
        <View style={styles.text}>
          <Text style={styles.title}>
            React Native
          </Text>
          <Text style={styles.subtitle}>
            Build high quality mobile apps using React
          </Text>
        </View>
      </View>
    );
  },
});
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 },
});

Polyfills

React Native is focused on changing the way view code is written. For the rest, we look to the web for universal standards and polyfill those APIs where appropriate. You can use npm to install JavaScript libraries that work on top of the functionality baked into React Native, such as XMLHttpRequest, window.requestAnimationFrame, and navigator.geolocation. We are working on expanding the available APIs, and are excited for the Open Source community to contribute as well.

var React = require('react-native');
var { Text } = React;

var GeoInfo = React.createClass({
  getInitialState: function() {
    return { position: 'unknown' };
  },
  componentDidMount: function() {
    navigator.geolocation.getCurrentPosition(
      (position) => this.setState({position}),
      (error) => console.error(error)
    );
  },
  render: function() {
    return (
      <Text>
        Position: {JSON.stringify(this.state.position)}
      </Text>
    );
  },
});

Extensibility

It is certainly possible to create a great app using React Native without writing a single line of native code, but React Native is also designed to be easily extended with custom native views and modules - that means you can reuse anything you've already built, and can import and use your favorite native libraries. To create a simple module in iOS, create a new class that implements the RCTBridgeModule protocol, and add RCT_EXPORT to the function you want to make available in JavaScript.

// Objective-C

#import "RCTBridgeModule.h"

@interface MyCustomModule : NSObject <RCTBridgeModule>
@end

@implementation MyCustomModule
- (void)processString:(NSString *)input callback:(RCTResponseSenderBlock)callback
{
  RCT_EXPORT(); // available as NativeModules.MyCustomModule.processString
  callback(@[[input stringByReplacingOccurrencesOfString:@"Goodbye" withString:@"Hello"];]]);
}
@end
// JavaScript

var React = require('react-native');
var { NativeModules, Text } = React;

var Message = React.createClass({
  render: function() {
    getInitialState() {
      return { text: 'Goodbye World.' };
    },
    componentDidMount() {
      NativeModules.MyCustomModule.processString(this.state.text, (text) => {
        this.setState({text});
      });
    },
    return (
      <Text>{this.state.text}</Text>
    );
  },
});

Custom iOS views can be exposed by subclassing RCTViewManager, implementing a -view method, and exporting properties with the RCT_EXPORT_VIEW_PROPERTY macro. Then a simple JavaScript file connects the dots.

// Objective-C

#import "RCTViewManager.h"

@interface MyCustomViewManager : RCTViewManager
@end

@implementation MyCustomViewManager
- (UIView *)view
{
  return [[MyCustomView alloc] init];
}

RCT_EXPORT_VIEW_PROPERTY(myCustomProperty);

@end`}
// JavaScript

var MyCustomView = createReactIOSNativeComponentClass({
  validAttributes: { myCustomProperty: true },
  uiViewClassName: 'MyCustomView',
});

Further documentation, tutorials, and more on the React Native website.