Build Native Mobile Apps using JavaScript and React
React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.
import React, { Component } from 'react';
+import { Text, View } from 'react-native';
-class App extends Component {
+class WhyReactNativeIsSoGreat extends Component {
render() {
return (
- <TabBarIOS>
- <TabBarIOS.Item title="React Native" selected={true}>
- <NavigatorIOS initialRoute={{ title: 'React Native' }} />
- </TabBarIOS.Item>
- </TabBarIOS>
- );
- }
-}
-import React
, {
- Component
,
-
} from
'react';
-import
{
- DrawerLayoutAndroid
,
- ProgressBarAndroid
,
- Text
,
-
} from
'react-native';
-
-class
App extends
Component {
-
render() {
-
return (
- <DrawerLayoutAndroid
- renderNavigationView
={() => <Text
>React Native<
/Text
>}>
- <ProgressBarAndroid
/>
- <
/DrawerLayoutAndroid
>
-
);
-
}
-
}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.
See Debugging.
Touch Handling
React Native implements a powerful system to negotiate touches in complex view hierarchies and provides high level components such as TouchableHighlight that integrate properly with scroll views and other elements without any additional configuration.
-import React, {
- Component,
-} from 'react';
-import {
- ScrollView,
- TouchableHighlight,
- Text,
-} from 'react-native';
-
-class TouchDemo extends Component {
- render() {
- 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.
-import React, {
- Component,
-} from 'react';
-import {
- Image,
- StyleSheet,
- Text,
- View,
-} from 'react-native';
-
-class ReactNative extends Component {
- render() {
- 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>
+ <Text>
+ If you like React on the web, you'll like React Native.
+ </Text>
+ <Text>
+ You just use native components like '<View>' and '<Text>',
+ instead of web components like '<div>' and '<a>'.
+ </Text>
</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.
-import React, {
- Component,
-} from 'react';
-import {
- Text,
-} from 'react-native';
+}
A React Native App is a Real Mobile App
With React Native, you don't build a “mobile web app”, an “HTML5 app”, or a “hybrid app”. You build a real mobile app that's indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.
import React, { Component } from 'react';
+import { Image, ScrollView, Text } from 'react-native';
-class GeoInfo extends Component {
- constructor(props) {
- super(props);
- this.state = { position: 'unknown' };
- },
- componentDidMount() {
- navigator.geolocation.getCurrentPosition(
- (position) => this.setState({position}),
- (error) => console.error(error)
- );
- }
+class AwkwardScrollingImageWithText extends Component {
render() {
return (
- <Text>
- Position: {JSON.stringify(this.state.position)}
- </Text>
+ <ScrollView>
+ <Image source={{uri: 'http://facebook.github.io/react/thats-amazing.png'}} />
+ <Text>
+ On iOS, a React Native '<ScrollView>' uses a native UIScrollView.
+ On Android, it uses a native ScrollView.
+
+ On iOS, a React Native '<Image>' uses a native UIImageView.
+ On Android, it uses a native ImageView.
+
+ React Native wraps the fundamental native components, giving you
+ the performance of a native app, plus the clean design of React.
+ </Text>
+ </ScrollView>
);
}
-}
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.
Creating iOS modules
To create a simple iOS module, create a new class that implements the RCTBridgeModule protocol, and wrap the function that you want to make available to JavaScript in RCT_EXPORT_METHOD. Additionally, the class itself must be explicitly exported with RCT_EXPORT_MODULE();.
-#import "RCTBridgeModule.h"
+}
Don't Waste Time Recompiling
React Native lets you build your app faster. Instead of recompiling, you can reload your app instantly. With hot reloading, you can even run new code while retaining your application state. Give it a try - it's a magical experience.
Use Native Code When You Need To
React Native combines smoothly with components written in Objective-C, Java, or Swift. It's simple to drop down to native code if you need to optimize a few aspects of your application. It's also easy to build part of your app in React Native, and part of your app using native code directly - that's how the Facebook app works.
import React, { Component } from 'react';
+import { Text, View } from 'react-native';
+import { TheGreatestComponentInTheWorld } from './your-native-code';
-@interface MyCustomModule : NSObject <RCTBridgeModule>
-@end
-
-@implementation MyCustomModule
-
-RCT_EXPORT_MODULE();
-RCT_EXPORT_METHOD(processString:(NSString *)input callback:(RCTResponseSenderBlock)callback)
-{
- callback(@[[input stringByReplacingOccurrencesOfString:@"Goodbye" withString:@"Hello"]]);
-}
-@end
-import React, {
- Component,
-} from 'react';
-import {
- NativeModules,
- Text,
-} from 'react-native';
-
-class Message extends Component {
- constructor(props) {
- super(props);
- this.state = { text: 'Goodbye World.' };
- }
- componentDidMount() {
- NativeModules.MyCustomModule.processString(this.state.text, (text) => {
- this.setState({text});
- });
- }
+class SomethingFast extends Component {
render() {
return (
- <Text>{this.state.text}</Text>
+ <View>
+ <TheGreatestComponentInTheWorld />
+ <Text>
+ TheGreatestComponentInTheWorld could use native Objective-C,
+ Java, or Swift - the product development process is the same.
+ </Text>
+ </View>
);
}
-}
Creating iOS views
Custom iOS views can be exposed by subclassing RCTViewManager, implementing a -(UIView *)view method, and exporting properties with the RCT_EXPORT_VIEW_PROPERTY macro. Then a simple JavaScript file connects the dots.
-#import "RCTViewManager.h"
-
-@interface MyCustomViewManager : RCTViewManager
-@end
-
-@implementation MyCustomViewManager
-
-RCT_EXPORT_MODULE()
-
-- (UIView *)view
-{
- return [[MyCustomView alloc] init];
-}
-
-RCT_EXPORT_VIEW_PROPERTY(myCustomProperty, NSString);
-@end
-import React, {
- Component,
-} from 'react';
-import {
- requireNativeComponent,
-} from 'react-native';
-
-var NativeMyCustomView = requireNativeComponent('MyCustomView', MyCustomView);
-
-export default class MyCustomView extends Component {
- static propTypes = {
- myCustomProperty: React.PropTypes.oneOf(['a', 'b']),
- };
- render() {
- return <NativeMyCustomView {...this.props} />;
- }
-}
-
Creating Android modules
Likewise, Android also supports custom extensions, the methods are just slightly different.
To create a simple module in Android, create a new class that extends the ReactContextBaseJavaModule class, and annotate the function that you want to make available to JavaScript with @ReactMethod. Additionally, the class itself must be registered in the ReactPackage of your React Native application.
-public class MyCustomModule extends ReactContextBaseJavaModule {
- @ReactMethod
- public void processString(String input, Callback callback) {
- callback.invoke(input.replace("Goodbye", "Hello"));
- }
-}
-
-import React, {
- Component,
-} from 'react';
-import {
- NativeModules,
- Text,
-} from 'react-native';
-class Message extends Component {
- constructor(props) {
- super(props);
- this.state = { text: 'Goodbye World.' };
- },
- componentDidMount() {
- NativeModules.MyCustomModule.processString(this.state.text, (text) => {
- this.setState({text});
- });
- }
- render() {
- return (
- <Text>{this.state.text}</Text>
- );
- }
-}
-
Creating Android views
Custom Android views can be exposed by extending SimpleViewManager, implementing a createViewInstance and getName methods, and exporting properties with the @ReactProp annotation. Then a simple JavaScript file connects the dots.
-public class MyCustomViewManager extends SimpleViewManager<MyCustomView> {
- @Override
- public String getName() {
- return "MyCustomView";
- }
-
- @Override
- protected MyCustomView createViewInstance(ThemedReactContext reactContext) {
- return new MyCustomView(reactContext);
- }
-
- @ReactProp(name = "myCustomProperty")
- public void setMyCustomProperty(MyCustomView view, String value) {
- view.setMyCustomProperty(value);
- }
-}
-
-import React, {
- Component,
-} from 'react';
-import {
- requireNativeComponent,
-} from 'react-native';
-
-var NativeMyCustomView = requireNativeComponent('MyCustomView', MyCustomView);
-
-export default class MyCustomView extends Component {
- static propTypes = {
- myCustomProperty: React.PropTypes.oneOf(['a', 'b']),
- };
- render() {
- return <NativeMyCustomView {...this.props} />;
- }
-}
-
React Native