diff --git a/website/src/react-native/index.js b/website/src/react-native/index.js
index 29796c45b..ea77ccd8c 100644
--- a/website/src/react-native/index.js
+++ b/website/src/react-native/index.js
@@ -48,11 +48,14 @@ var index = React.createClass({
{`// iOS
-var React = require('react-native');
-var { TabBarIOS, NavigatorIOS } = React;
+import React, {
+ Component,
+ TabBarIOS,
+ NavigatorIOS
+} from 'react-native';
-var App = React.createClass({
- render: function() {
+class App extends Component {
+ render() {
return (
@@ -60,26 +63,30 @@ var App = React.createClass({
);
- },
-});`}
+ }
+}`}
{`// Android
-var React = require('react-native');
-var { DrawerLayoutAndroid, ProgressBarAndroid, Text } = React;
+import React, {
+ Component,
+ DrawerLayoutAndroid,
+ ProgressBarAndroid,
+ Text
+} from 'react-native';
-var App = React.createClass({
- render: function() {
+class App extends Component {
+ render() {
return (
React Native}>
);
- },
-});`}
+ }
+}`}
Asynchronous Execution
@@ -98,11 +105,15 @@ var App = React.createClass({
{`// iOS & Android
-var React = require('react-native');
-var { ScrollView, TouchableHighlight, Text } = React;
+import React, {
+ Component,
+ ScrollView,
+ TouchableHighlight,
+ Text
+} from 'react-native';
-var TouchDemo = React.createClass({
- render: function() {
+class TouchDemo extends Component {
+ render() {
return (
console.log('pressed')}>
@@ -110,8 +121,8 @@ var TouchDemo = React.createClass({
);
- },
-});`}
+ }
+}`}
Flexbox and Styling
@@ -121,11 +132,16 @@ var TouchDemo = React.createClass({
{`// iOS & Android
-var React = require('react-native');
-var { Image, StyleSheet, Text, View } = React;
+var React, {
+ Component,
+ Image,
+ StyleSheet,
+ Text,
+ View
+} from 'react-native';
-var ReactNative = React.createClass({
- render: function() {
+class ReactNative extends Component {
+ render() {
return (
);
- },
-});
+ }
+}
var styles = StyleSheet.create({
row: { flexDirection: 'row', margin: 40 },
image: { width: 40, height: 40, marginRight: 10 },
@@ -158,29 +174,32 @@ var styles = StyleSheet.create({
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.
-{`// iOS (Android support for geolocation coming)
+{`// iOS & Android
-var React = require('react-native');
-var { Text } = React;
+import React, {
+ Component,
+ Text
+} from 'react-native';
-var GeoInfo = React.createClass({
- getInitialState: function() {
- return { position: 'unknown' };
+class GeoInfo extends Component {
+ constructor(props) {
+ super(props);
+ this.state = { position: 'unknown' };
},
- componentDidMount: function() {
+ componentDidMount() {
navigator.geolocation.getCurrentPosition(
(position) => this.setState({position}),
(error) => console.error(error)
);
- },
- render: function() {
+ }
+ render() {
return (
Position: {JSON.stringify(this.state.position)}
);
- },
-});`}
+ }
+}`}
Extensibility
@@ -213,24 +232,28 @@ RCT_EXPORT_METHOD(processString:(NSString *)input callback:(RCTResponseSenderBlo
{`// JavaScript
-var React = require('react-native');
-var { NativeModules, Text } = React;
+import React, {
+ Component,
+ NativeModules,
+ Text
+} from 'react-native';
-var Message = React.createClass({
- getInitialState() {
- return { text: 'Goodbye World.' };
- },
+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: function() {
+ }
+ render() {
return (
{this.state.text}
);
}
-});`}
+}`}
Creating iOS views
@@ -260,20 +283,22 @@ RCT_EXPORT_VIEW_PROPERTY(myCustomProperty, NSString);
{`// JavaScript
-var React = require('react-native');
-var { requireNativeComponent } = React;
+import React, {
+ Component,
+ requireNativeComponent
+} from 'react-native';
-class MyCustomView extends React.Component {
+var NativeMyCustomView = requireNativeComponent('MyCustomView', MyCustomView);
+
+export default class MyCustomView extends Component {
+ static propTypes = {
+ myCustomProperty: React.PropTypes.oneOf(['a', 'b']),
+ };
render() {
return ;
}
}
-MyCustomView.propTypes = {
- myCustomProperty: React.PropTypes.oneOf(['a', 'b']),
-};
-
-var NativeMyCustomView = requireNativeComponent('MyCustomView', MyCustomView);
-module.exports = MyCustomView;`}
+`}
Creating Android modules
@@ -300,23 +325,27 @@ public class MyCustomModule extends ReactContextBaseJavaModule {
{`// JavaScript
-var React = require('react-native');
-var { NativeModules, Text } = React;
-var Message = React.createClass({
- getInitialState() {
- return { text: 'Goodbye World.' };
+import React, {
+ Component,
+ 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: function() {
+ }
+ render() {
return (
{this.state.text}
);
}
-});
+}
`}
@@ -348,20 +377,21 @@ public class MyCustomViewManager extends SimpleViewManager {
{`// JavaScript
-var React = require('react-native');
-var { requireNativeComponent } = React;
+import React, {
+ Component,
+ requireNativeComponent
+} from 'react-native';
-class MyCustomView extends React.Component {
+var NativeMyCustomView = requireNativeComponent('MyCustomView', MyCustomView);
+
+export default class MyCustomView extends Component {
+ static propTypes = {
+ myCustomProperty: React.PropTypes.oneOf(['a', 'b']),
+ };
render() {
return ;
}
}
-MyCustomView.propTypes = {
- myCustomProperty: React.PropTypes.oneOf(['a', 'b']),
-};
-
-var NativeMyCustomView = requireNativeComponent('MyCustomView', MyCustomView);
-module.exports = MyCustomView;
`}