diff --git a/README.md b/README.md
index b3af4a4..258d6eb 100644
--- a/README.md
+++ b/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);
 ```
diff --git a/twitter-example/components/BackButton.js b/twitter-example/components/BackButton.js
index 23b5fbc..4ac9b88 100644
--- a/twitter-example/components/BackButton.js
+++ b/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;
+}
diff --git a/twitter-example/components/RightCorner.js b/twitter-example/components/RightCorner.js
new file mode 100644
index 0000000..ea41823
--- /dev/null
+++ b/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} />
+    );
+  }
+}
diff --git a/twitter-example/components/Tweet.js b/twitter-example/components/Tweet.js
index c15c22f..2da9290 100644
--- a/twitter-example/components/Tweet.js
+++ b/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;
diff --git a/twitter-example/components/TweetBig.js b/twitter-example/components/TweetBig.js
index 0aed68b..e5e8174 100644
--- a/twitter-example/components/TweetBig.js
+++ b/twitter-example/components/TweetBig.js
@@ -1,107 +1,104 @@
-'use strict';
+import React, { StyleSheet, Text, Image, ScrollView, View, PropTypes } from 'react-native';
 
-var React = require('react-native');
+const propTypes = {
+  data: PropTypes.object,
+};
 
-var {
-  StyleSheet,
-  Text,
-  Image,
-  ScrollView,
-  View,
-} = React;
+class TweetBig extends React.Component {
+  constructor(props) {
+    super(props);
+    this.styles = StyleSheet.create({
+      retweetContainer: {
+        margin: 10,
+        paddingTop: 8,
+        flexDirection: 'row',
+        borderTopWidth: 1,
+        borderColor: '#DAE6F0',
+      },
+      rtBold: {
+        fontSize: 14,
+        marginRight: 3,
+        fontWeight: '600',
+      },
+      rtText: {
+        fontSize: 14,
+        fontWeight: '400',
+        color: '#748999',
+      },
 
-var TweetBig = React.createClass({
+      tweetContainer: {
+        backgroundColor: 'white',
+        borderBottomWidth: 1,
+        borderColor: '#DAE6F0',
+        paddingTop: 4,
+      },
+      avatar: {
+        backgroundColor: 'gray',
+        width: 50,
+        height: 50,
+        marginLeft: 10,
+        borderRadius: 4,
+      },
+      userContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        flex: 1,
+      },
+      textContainer: {
+        flex: 1,
+        padding: 10,
+        flexDirection: 'column',
+      },
+      username: {
+        fontSize: 13,
+        color: '#8999a5',
+        marginTop: 2,
+      },
+      name: {
+        fontWeight: '600',
+        fontSize: 15,
+      },
+      text: {
+        marginTop: 5,
+        fontSize: 17,
+        fontWeight: '300',
+      },
+      rightContainer: {
+        flex: 1,
+        padding: 10,
+      },
+    });
+  }
 
   render() {
-    var {
+    const {
       text,
-      user
+      user,
     } = this.props.data;
 
     return (
       <ScrollView>
-        <View style={styles.tweetContainer}>
-          <View style={styles.userContainer}>
-            <Image source={{uri: user.avatar}} style={styles.avatar} />
-            <View style={styles.rightContainer}>
-              <Text style={styles.name}>{user.name}</Text>
-              <Text style={styles.username}>@{user.username}</Text>
+        <View style={this.styles.tweetContainer}>
+          <View style={this.styles.userContainer}>
+            <Image source={{ uri: user.avatar }} style={this.styles.avatar} />
+            <View style={this.styles.rightContainer}>
+              <Text style={this.styles.name}>{user.name}</Text>
+              <Text style={this.styles.username}>@{user.username}</Text>
             </View>
           </View>
-          <View style={styles.textContainer}>
-            <Text style={styles.text}>{text}</Text>
+          <View style={this.styles.textContainer}>
+            <Text style={this.styles.text}>{text}</Text>
           </View>
-          <View style={styles.retweetContainer}>
-            <Text style={styles.rtBold}>1</Text>
-            <Text style={styles.rtText}>RETWEET</Text>
+          <View style={this.styles.retweetContainer}>
+            <Text style={this.styles.rtBold}>1</Text>
+            <Text style={this.styles.rtText}>RETWEET</Text>
           </View>
         </View>
       </ScrollView>
-    )
-  }
-});
-
-var styles = StyleSheet.create({
-  retweetContainer: {
-    margin: 10,
-    paddingTop: 8,
-    flexDirection: 'row',
-    borderTopWidth: 1,
-    borderColor: '#DAE6F0'
-  },
-  rtBold: {
-    fontSize: 14,
-    marginRight: 3,
-    fontWeight: '600',
-  },
-  rtText: {
-    fontSize: 14,
-    fontWeight: '400',
-    color: '#748999'
-  },
-
-  tweetContainer: {
-    backgroundColor: 'white',
-    borderBottomWidth: 1,
-    borderColor: '#DAE6F0',
-    paddingTop: 4
-  },
-  avatar: {
-    backgroundColor: 'gray',
-    width: 50,
-    height: 50,
-    marginLeft: 10,
-    borderRadius: 4
-  },
-  userContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    flex: 1
-  },
-  textContainer: {
-    flex: 1,
-    padding: 10,
-    flexDirection: 'column'
-  },
-  username: {
-    fontSize: 13,
-    color: '#8999a5',
-    marginTop: 2
-  },
-  name: {
-    fontWeight: '600',
-    fontSize: 15
-  },
-  text: {
-    marginTop: 5,
-    fontSize: 17,
-    fontWeight: '300'
-  },
-  rightContainer: {
-    flex: 1,
-    padding: 10
+    );
   }
-});
+}
 
+TweetBig.propTypes = propTypes;
 
-module.exports = TweetBig;
+export default TweetBig;
diff --git a/twitter-example/components/icons/AddPeople.js b/twitter-example/components/icons/AddPeople.js
index 965a125..046a6a6 100644
--- a/twitter-example/components/icons/AddPeople.js
+++ b/twitter-example/components/icons/AddPeople.js
@@ -1,42 +1,43 @@
-'use strict';
+import React, { StyleSheet, TouchableHighlight, Image, PropTypes } from 'react-native';
 
-var React = require('react-native');
+import FindPeoplePage from '../../pages/FindPeoplePage';
 
-var FindPeoplePage = require('../../pages/FindPeoplePage');
+const propTypes = {
+  toRoute: PropTypes.func.isRequired,
+};
 
-var {
-  StyleSheet,
-  TouchableHighlight,
-  Image
-} = React;
+class AddPeopleIcon extends React.Component {
+  constructor(props) {
+    super(props);
 
+    this.styles = StyleSheet.create({
+      icon: {
+        width: 25,
+        height: 18,
+        marginTop: 5,
+        marginLeft: 8,
+      },
+    });
 
-var styles = StyleSheet.create({
-  icon: {
-    width: 25,
-    height: 18,
-    marginTop: 5,
-    marginLeft: 8
+    this.goToAddPage = this.goToAddPage.bind(this);
   }
-});
-
-var AddPeopleIcon = React.createClass({
 
-  goToAddPage: function() {
+  goToAddPage() {
     this.props.toRoute({
-      name: "Find people",
-      component: FindPeoplePage
+      name: 'Find people',
+      component: FindPeoplePage,
     });
-  },
+  }
 
   render() {
     return (
       <TouchableHighlight underlayColor="transparent" onPress={this.goToAddPage}>
-        <Image source={require('image!add_people_icon')} style={styles.icon} />
+        <Image source={require('../../images/add_people_icon.png')} style={this.styles.icon} />
       </TouchableHighlight>
-    )
+    );
   }
-});
+}
 
+AddPeopleIcon.propTypes = propTypes;
 
-module.exports = AddPeopleIcon;
+export default AddPeopleIcon;
diff --git a/twitter-example/components/icons/Compose.js b/twitter-example/components/icons/Compose.js
index 5d9fcdf..6cd7ef2 100644
--- a/twitter-example/components/icons/Compose.js
+++ b/twitter-example/components/icons/Compose.js
@@ -1,32 +1,24 @@
-'use strict';
+import React, { StyleSheet, TouchableHighlight, Image } from 'react-native';
 
-var React = require('react-native');
+export default class ComposeIcon extends React.Component {
+  constructor(props) {
+    super(props);
 
-var {
-  StyleSheet,
-  TouchableHighlight,
-  Image
-} = React;
-
-
-var styles = StyleSheet.create({
-  icon: {
-    width: 21,
-    height: 21,
-    marginTop: 4,
-    marginRight: 15
+    this.styles = StyleSheet.create({
+      icon: {
+        width: 21,
+        height: 21,
+        marginTop: 4,
+        marginRight: 15,
+      },
+    });
   }
-});
 
-var ComposeIcon = React.createClass({
   render() {
     return (
       <TouchableHighlight underlayColor="transparent">
-        <Image source={require('image!compose_icon')} style={styles.icon} />
+        <Image source={require('../../images/compose_icon.png')} style={this.styles.icon} />
       </TouchableHighlight>
-    )
+    );
   }
-});
-
-
-module.exports = ComposeIcon;
+}
diff --git a/twitter-example/components/icons/Search.js b/twitter-example/components/icons/Search.js
index b4c351c..e5802b1 100644
--- a/twitter-example/components/icons/Search.js
+++ b/twitter-example/components/icons/Search.js
@@ -1,37 +1,37 @@
-'use strict';
-
-var React = require('react-native');
-
-var {
-  StyleSheet,
-  TouchableHighlight,
-  Image
-} = React;
-
-
-var styles = StyleSheet.create({
-  icon: {
-    width: 21,
-    height: 21,
-    marginTop: 4,
-    marginRight: 15
+import React, { TouchableHighlight, Image, StyleSheet, PropTypes } from 'react-native';
+
+const propTypes = {
+  goToSearch: PropTypes.func.isRequired,
+};
+
+class SearchIcon extends React.Component {
+  constructor(props) {
+    super(props);
+    this.styles = StyleSheet.create({
+      icon: {
+        width: 21,
+        height: 21,
+        marginTop: 4,
+        marginRight: 15,
+      },
+    });
+
+    this.goToSearch = this.goToSearch.bind(this);
   }
-});
-
-var SearchIcon = React.createClass({
 
-  goToSearch: function() {
+  goToSearch() {
     this.props.goToSearch();
-  },
+  }
 
   render() {
     return (
       <TouchableHighlight underlayColor="transparent" onPress={this.goToSearch}>
-        <Image source={require('image!search_icon')} style={styles.icon} />
+        <Image source={require('../../images/search_icon.png')} style={this.styles.icon} />
       </TouchableHighlight>
-    )
+    );
   }
-});
+}
 
+SearchIcon.propTypes = propTypes;
 
-module.exports = SearchIcon;
+export default SearchIcon;
diff --git a/twitter-example/components/icons/SearchAndCompose.js b/twitter-example/components/icons/SearchAndCompose.js
index 24fd8eb..2d22ce8 100644
--- a/twitter-example/components/icons/SearchAndCompose.js
+++ b/twitter-example/components/icons/SearchAndCompose.js
@@ -1,70 +1,61 @@
-'use strict';
-
-var React = require('react-native');
-
-var SearchIcon = require('./Search');
-var ComposeIcon = require('./Compose');
-
-var SearchPage = require('../../pages/SearchPage');
-
-var {
-  StyleSheet,
-  View,
-  TextInput
-} = React;
-
-
-var styles = StyleSheet.create({
-  iconContainer: {
-    flexDirection: 'row',
-  },
-  icon: {
-    width: 21,
-    height: 21,
-    marginTop: 4,
-    marginRight: 15
-  },
-  input: {
-    backgroundColor: '#3f88bf',
-    width: 220,
-    height: 32,
-    marginTop: 6,
-    paddingLeft: 10,
-    color: 'white',
-    borderRadius: 4
-  }
-});
-
-
-var SearchBar = React.createClass({
-  render() {
-    return (
-      <TextInput style={styles.input} placeholder="Search Twitter" />
-    )
+import React, { StyleSheet, View, PropTypes } from 'react-native';
+
+import SearchIcon from './Search';
+import ComposeIcon from './Compose';
+import SearchPage from '../../pages/SearchPage';
+import SearchBar from './SearchBar';
+
+const propTypes = {
+  toRoute: PropTypes.func.isRequired,
+};
+
+class SearchAndCompose extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.styles = StyleSheet.create({
+      iconContainer: {
+        flexDirection: 'row',
+      },
+      icon: {
+        width: 21,
+        height: 21,
+        marginTop: 4,
+        marginRight: 15,
+      },
+      input: {
+        backgroundColor: '#3f88bf',
+        width: 220,
+        height: 32,
+        marginTop: 6,
+        paddingLeft: 10,
+        color: 'white',
+        borderRadius: 4,
+      },
+    });
+
+    this.goToSearch = this.goToSearch.bind(this);
   }
-});
 
-
-var SearchAndCompose = React.createClass({
-
-  goToSearch: function() {
+  goToSearch() {
     this.props.toRoute({
-      name: "Search",
+      name: 'Search',
       component: SearchPage,
       rightCorner: ComposeIcon,
-      titleComponent: SearchBar
-    })
-  },
+      titleComponent: SearchBar,
+    });
+  }
 
   render() {
     return (
-      <View style={styles.iconContainer}>
+      <View style={this.styles.iconContainer}>
         <SearchIcon goToSearch={this.goToSearch} />
         <ComposeIcon />
       </View>
-    )
+    );
   }
-}); 
+}
 
+SearchAndCompose.propTypes = propTypes;
 
-module.exports = SearchAndCompose;
+export default SearchAndCompose;
diff --git a/twitter-example/components/icons/SearchBar.js b/twitter-example/components/icons/SearchBar.js
new file mode 100644
index 0000000..61e235d
--- /dev/null
+++ b/twitter-example/components/icons/SearchBar.js
@@ -0,0 +1,25 @@
+import React, { StyleSheet, TextInput } from 'react-native';
+
+export default class SearchBar extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.styles = StyleSheet.create({
+      input: {
+        backgroundColor: '#3f88bf',
+        width: 220,
+        height: 32,
+        marginTop: 6,
+        paddingLeft: 10,
+        color: 'white',
+        borderRadius: 4,
+      },
+    });
+  }
+
+  render() {
+    return (
+      <TextInput style={this.styles.input} placeholder="Search Twitter" />
+    );
+  }
+}
diff --git a/twitter-example/index.js b/twitter-example/index.js
index e09e10c..3c67288 100644
--- a/twitter-example/index.js
+++ b/twitter-example/index.js
@@ -1,45 +1,35 @@
-'use strict';
-
-var React = require('react-native');
-
-var Router = require('../index');
-
-var HomePage = require('./pages/HomePage');
-var BackButton = require('./components/BackButton');
-var SearchAndCompose = require('./components/icons/SearchAndCompose');
-var AddPeople = require('./components/icons/AddPeople');
-
-var {
-  StyleSheet,
-  View,
-} = React;
-
-var styles = StyleSheet.create({
-  header: {
-    backgroundColor: '#5cafec'
+import React, { StyleSheet } from 'react-native';
+
+import Router from '../index';
+
+import HomePage from './pages/HomePage';
+import BackButton from './components/BackButton';
+import SearchAndCompose from './components/icons/SearchAndCompose';
+import AddPeople from './components/icons/AddPeople';
+
+export default class TwitterApp extends React.Component {
+  constructor(props) {
+    super(props);
+    this.firstRoute = {
+      name: 'Home',
+      component: HomePage,
+      leftCorner: AddPeople,
+    };
+    this.styles = StyleSheet.create({
+      header: {
+        backgroundColor: '#5cafec',
+      },
+    });
   }
-});
 
-
-
-var firstRoute = {
-  name: 'Home',
-  component: HomePage,
-  leftCorner: AddPeople
-};
-
-var TwitterApp = React.createClass({
   render() {
     return (
-      <Router 
-        firstRoute={firstRoute} 
-        headerStyle={styles.header}
+      <Router
+        firstRoute={this.firstRoute}
+        headerStyle={this.styles.header}
         backButtonComponent={BackButton}
         rightCorner={SearchAndCompose}
       />
-    )
+    );
   }
-});
-
-
-module.exports = TwitterApp;
+}
diff --git a/twitter-example/pages/FindPeoplePage.js b/twitter-example/pages/FindPeoplePage.js
index d8c6462..b59fded 100644
--- a/twitter-example/pages/FindPeoplePage.js
+++ b/twitter-example/pages/FindPeoplePage.js
@@ -1,48 +1,22 @@
-'use strict';
-
-var React = require('react-native');
-
-var {
-  AppRegistry,
-  StyleSheet,
-  Text,
-  TouchableHighlight,
-  View,
-} = React;
-
-
-var RightCorner = React.createClass({
-  render() {
-    return (
-      <View style={styles.button} />
-    )
+import React, { StyleSheet, Text, View } from 'react-native';
+
+export default class FindPeoplePage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.styles = StyleSheet.create({
+      container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+      },
+    });
   }
-});
 
-
-var FindPeoplePage = React.createClass({
   render() {
     return (
-      <View style={styles.container}>
+      <View style={this.styles.container}>
         <Text>Find people!</Text>
       </View>
-    )
-  }
-});
-
-
-var styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  button: {
-    width: 100,
-    height: 50,
-    backgroundColor: 'orange'
+    );
   }
-});
-
-
-module.exports = FindPeoplePage;
+}
diff --git a/twitter-example/pages/HomePage.js b/twitter-example/pages/HomePage.js
index d32569d..cd2fcae 100644
--- a/twitter-example/pages/HomePage.js
+++ b/twitter-example/pages/HomePage.js
@@ -1,69 +1,65 @@
-'use strict';
+import React, { StyleSheet, ScrollView, PropTypes } from 'react-native';
 
-var React = require('react-native');
+import Tweet from '../components/Tweet';
+import TweetPage from '../components/TweetBig';
 
-var Tweet = require('../components/Tweet');
-var TweetPage = require('../components/TweetBig');
+const propTypes = {
+  toRoute: PropTypes.func.isRequired,
+};
 
-var {
-  StyleSheet,
-  ScrollView
-} = React;
-
-
-var HomePage = React.createClass({
-
-  getInitialState: function() {
-    return {
+class HomePage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.styles = StyleSheet.create({
+      container: {
+        flex: 1,
+        backgroundColor: '#f5f8fa',
+      },
+    });
+    this.state = {
       tweets: [
         {
-          text: "The React Native Router is awesome!",
+          text: 'The React Native Router is awesome!',
           user: {
-            name: "Tristan Edwards",
-            username: "t4t5",
-            avatar: "https://pbs.twimg.com/profile_images/497658257276538880/KrPEaVDu_400x400.jpeg"
+            name: 'Tristan Edwards',
+            username: 't4t5',
+            avatar: 'https://pbs.twimg.com/profile_images/497658257276538880/KrPEaVDu_400x400.jpeg',
           },
         },
         {
-          text: "Hello world!",
+          text: 'Hello world!',
           user: {
-            name: "Leonard Pauli",
-            username: "LeonardPauli",
-            avatar: "https://pbs.twimg.com/profile_images/436581173871927296/txEzObgk_400x400.jpeg"
-          }
-        }
-      ]
-    }
-  },
+            name: 'Leonard Pauli',
+            username: 'LeonardPauli',
+            avatar: 'https://pbs.twimg.com/profile_images/436581173871927296/txEzObgk_400x400.jpeg',
+          },
+        },
+      ],
+    };
+    this.goToTweet = this.goToTweet.bind(this);
+  }
 
-  goToTweet: function(tweetData) {
+  goToTweet(tweetData) {
     this.props.toRoute({
-      name: "Tweet",
+      name: 'Tweet',
       component: TweetPage,
-      data: tweetData
+      data: tweetData,
     });
-  },
+  }
 
   render() {
-    var Tweets = this.state.tweets.map((tweetData) => {
+    const Tweets = this.state.tweets.map((tweetData) => {
       return <Tweet {...tweetData} onPress={this.goToRoute} goToTweet={this.goToTweet} />;
     });
 
     return (
-      <ScrollView style={styles.container}>
+      <ScrollView style={this.styles.container}>
         {Tweets}
       </ScrollView>
-    )
-  }
-});
-
-
-var styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#f5f8fa'
+    );
   }
-});
+}
 
+HomePage.propTypes = propTypes;
 
-module.exports = HomePage;
+export default HomePage;
diff --git a/twitter-example/pages/SearchPage.js b/twitter-example/pages/SearchPage.js
index b2e9990..179ae0e 100644
--- a/twitter-example/pages/SearchPage.js
+++ b/twitter-example/pages/SearchPage.js
@@ -1,34 +1,22 @@
-'use strict';
-
-var React = require('react-native');
-
-var {
-  AppRegistry,
-  StyleSheet,
-  Text,
-  TouchableHighlight,
-  View,
-} = React;
-
-
-var styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
+import React, { StyleSheet, Text, View } from 'react-native';
+
+export default class SearchPage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.styles = StyleSheet.create({
+      container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+      },
+    });
   }
-});
 
-
-var ThirdPage = React.createClass({
   render() {
     return (
-      <View style={styles.container}>
+      <View style={this.styles.container}>
         <Text>Search page</Text>
       </View>
-    )
+    );
   }
-});
-
-
-module.exports = ThirdPage;
+}