Merge pull request #14 from charpeni/issue-3

Convert twitter-example to ES6

Author: davidLeonardi

README.md

@@ -28,7 +28,7 @@ class HelloPage extends Component {
   render() {
     return <Text>Hello world!</Text>;
   }
-  
+
 }
 
 // Your route object should contain at least:
@@ -47,7 +47,7 @@ class MyApp extends Component {
       <Router firstRoute={firstRoute} />
     );
   }
-  
+
 }
 
 AppRegistry.registerComponent('routerTest', () => MyApp);
@@ -76,7 +76,7 @@ class HelloPage extends Component {
       </View>
     );
   }
-  
+
 }
 ```
 
@@ -146,16 +146,13 @@ Events emitted by the router:
 A more advanced example: Twitter app
 ------------------------------------
 
-To see more of the router in action, you can check out the Twitter example app that comes with the package. Just make sure that you first drag all the images from ```node_modules/react-native-simple-router/twitter-example/images``` to your project's Images.xcassets
+To see more of the router in action, you can check out the Twitter example app that comes with the package.
 
-After that, don't forget to rebuild the app in XCode before you launch the simulator. Then test the app by requiring the TwitterApp component:
+Test the app by requiring the TwitterApp component:
 
 ```javascript
+import React, { AppRegistry } from 'react-native';
 import TwitterApp from './node_modules/react-native-simple-router/twitter-example';
 
-var {
-  AppRegistry
-} = React;
-
 AppRegistry.registerComponent('routerTest', () => TwitterApp);
 ```

twitter-example/components/BackButton.js

@@ -1,33 +1,21 @@
-'use strict';
-
-var React = require('react-native');
-
-var {
-  StyleSheet,
-  TouchableHighlight,
-  Image,
-  View,
-} = React;
-
-
-var styles = StyleSheet.create({
-  backButton: {
-    width: 10,
-    height: 17,
-    marginLeft: 10,
-    marginTop: 3,
-    marginRight: 10
+import React, { StyleSheet, Image } from 'react-native';
+
+export default class BackButton extends React.Component {
+  constructor(props) {
+    super(props);
+    this.styles = StyleSheet.create({
+      backButton: {
+        width: 10,
+        height: 17,
+        marginLeft: 10,
+        marginTop: 3,
+        marginRight: 10,
+      },
+    });
   }
-});
-
-
-var BackButton = React.createClass({
   render() {
     return (
-      <Image source={require('image!back_button')} style={styles.backButton} />
-    )
+      <Image source={require('../images/back_button.png')} style={this.styles.backButton} />
+    );
   }
-}); 
-
-
-module.exports = BackButton;
+}

twitter-example/components/RightCorner.js

@@ -0,0 +1,20 @@
+import React, { StyleSheet, View } from 'react-native';
+
+export default class RightCorner extends React.Component {
+  constructor(props) {
+    super(props);
+    this.styles = StyleSheet.create({
+      button: {
+        width: 100,
+        height: 50,
+        backgroundColor: 'orange',
+      },
+    });
+  }
+
+  render() {
+    return (
+      <View style={this.styles.button} />
+    );
+  }
+}

twitter-example/components/Tweet.js

@@ -1,83 +1,82 @@
-'use strict';
+import React, { StyleSheet, Text, TouchableHighlight, Image, View, PropTypes } from 'react-native';
 
-var React = require('react-native');
+const propTypes = {
+  goToTweet: PropTypes.func.isRequired,
+  text: PropTypes.string,
+  user: PropTypes.object,
+};
 
-var {
-  AppRegistry,
-  StyleSheet,
-  Text,
-  TouchableHighlight,
-  Image,
-  View,
-} = React;
+class Tweet extends React.Component {
+  constructor(props) {
+    super(props);
+    this.styles = StyleSheet.create({
+      tweetContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: 'white',
+        borderBottomWidth: 1,
+        borderColor: '#DAE6F0',
+        paddingTop: 4,
+        paddingBottom: 10,
+      },
+      avatar: {
+        backgroundColor: 'gray',
+        width: 50,
+        height: 50,
+        marginLeft: 10,
+        borderRadius: 4,
+      },
+      userContainer: {
+        flexDirection: 'row',
+      },
+      username: {
+        marginLeft: 4,
+        fontSize: 13,
+        color: '#8999a5',
+        marginTop: 2,
+      },
+      name: {
+        fontWeight: '600',
+        fontSize: 15,
+      },
+      text: {
+        marginTop: 5,
+      },
+      rightContainer: {
+        flex: 1,
+        padding: 10,
+      },
+    });
+    this.goToTweet = this.goToTweet.bind(this);
+  }
 
-var Tweet = React.createClass({
-  
-  goToTweet: function() {
+  goToTweet() {
     this.props.goToTweet(this.props);
-  },
+  }
 
   render() {
-    var {
+    const {
       text,
-      user
+      user,
     } = this.props;
 
     return (
       <TouchableHighlight underlayColor="transparent" onPress={this.goToTweet}>
-        <View style={styles.tweetContainer}>
-          <Image source={{uri: user.avatar}} style={styles.avatar} />
-          <View style={styles.rightContainer}>
-            <View style={styles.userContainer}>
-              <Text style={styles.name}>{user.name}</Text>
-              <Text style={styles.username}>@{user.username}</Text>
+        <View style={this.styles.tweetContainer}>
+          <Image source={{ uri: user.avatar }} style={this.styles.avatar} />
+          <View style={this.styles.rightContainer}>
+            <View style={this.styles.userContainer}>
+              <Text style={this.styles.name}>{user.name}</Text>
+              <Text style={this.styles.username}>@{user.username}</Text>
             </View>
-            <Text style={styles.text}>{text}</Text>
+            <Text style={this.styles.text}>{text}</Text>
           </View>
         </View>
       </TouchableHighlight>
-    )
-  }
-});
-
-var styles = StyleSheet.create({
-  tweetContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: 'white',
-    borderBottomWidth: 1,
-    borderColor: '#DAE6F0',
-    paddingTop: 4,
-    paddingBottom: 10
-  },
-  avatar: {
-    backgroundColor: 'gray',
-    width: 50,
-    height: 50,
-    marginLeft: 10,
-    borderRadius: 4
-  },
-  userContainer: {
-    flexDirection: 'row'
-  },
-  username: {
-    marginLeft: 4,
-    fontSize: 13,
-    color: '#8999a5',
-    marginTop: 2
-  },
-  name: {
-    fontWeight: '600',
-    fontSize: 15
-  },
-  text: {
-    marginTop: 5
-  },
-  rightContainer: {
-    flex: 1,
-    padding: 10
+    );
   }
-});
+}
 
+Tweet.propTypes = propTypes;
 
-module.exports = Tweet;
+export default Tweet;