diff --git a/components/NavBarContainer.js b/components/NavBarContainer.js
index c2cd6d1..7ee7383 100644
--- a/components/NavBarContainer.js
+++ b/components/NavBarContainer.js
@@ -1,51 +1,55 @@
-'use strict';
+import React from 'react-native';
 
-var React = require('react-native');
+import NavBarContent from './NavBarContent';
 
-var NavBarContent = require('./NavBarContent');
-
-var {
+const {
   StyleSheet,
-  View
+  View,
+  Component,
 } = React;
 
-var NavBarContainer = React.createClass({
+class NavBarContainer extends Component {
+  constructor(props) {
+    super(props);
+
+    this.goBack = this.goBack.bind(this);
+    this.goForward = this.goForward.bind(this);
+    this.customAction = this.customAction.bind(this);
 
-  getInitialState: function() {
-    return {
+    this.state = {
       backButtonOpacity: 0,
-      previousRoute: {} // Keep previousRoute for smooth transitions
+      previousRoute: {}, // Keep previousRoute for smooth transitions
     };
-  },
+  }
 
-  componentWillReceiveProps: function(newProps) {
+  componentWillReceiveProps(newProps) {
     if (this.props && this.props.currentRoute.index !== newProps.currentRoute.index) {
       this.setState({
-        previousRoute: this.props.currentRoute
+        previousRoute: this.props.currentRoute,
       });
     }
-  },
+  }
 
-  goBack: function() {
+  goBack() {
     this.props.toBack(this.props.navigator);
-  },
+  }
 
-  goForward: function(route) {
+  goForward(route) {
     this.props.toRoute(route, this.props.navigator);
-  },
+  }
 
-  customAction: function(opts) {
+  customAction(opts) {
     this.props.customAction(opts);
-  },
+  }
 
   // We render both the current and the previous navbar (for animation)
-  render: function() {
-    var trans,
-      navbarStyle,
-      navbarContent;
+  render() {
+    let trans;
+    let navbarStyle;
+    let navbarContent;
 
     if (this.props.currentRoute.trans) {
-      trans = {backgroundColor: 'transparent'};
+      trans = { backgroundColor: 'transparent' };
     } else {
       trans = {};
     }
@@ -56,14 +60,15 @@ var NavBarContainer = React.createClass({
       navbarStyle = styles.navbarContainer;
     }
 
-    if(this.props.currentRoute.trans) {
+    if (this.props.currentRoute.trans) {
       navbarContent = (
         <NavBarContent
-        route={this.state.previousRoute}
-        backButtonComponent={this.props.backButtonComponent}
-        rightCorner={this.props.rightCorner}
-        titleStyle={this.props.titleStyle}
-        willDisappear="true"></NavBarContent>
+          route={this.state.previousRoute}
+          backButtonComponent={this.props.backButtonComponent}
+          rightCorner={this.props.rightCorner}
+          titleStyle={this.props.titleStyle}
+          willDisappear="true"
+        />
       );
     } else if (this.props.currentRoute.hideNavigationBar) {
       navbarContent = (
@@ -79,8 +84,8 @@ var NavBarContainer = React.createClass({
           leftProps={this.props.leftProps}
           rightProps={this.props.rightProps}
           titleProps={this.props.titleProps}
-          customAction={this.customAction}>
-      </NavBarContent>
+          customAction={this.customAction}
+        />
       );
     } else {
       navbarContent = (
@@ -96,8 +101,8 @@ var NavBarContainer = React.createClass({
           leftProps={this.props.leftProps}
           rightProps={this.props.rightProps}
           titleProps={this.props.titleProps}
-          customAction={this.customAction}>
-        </NavBarContent>
+          customAction={this.customAction}
+        />
       );
     }
 
@@ -107,23 +112,23 @@ var NavBarContainer = React.createClass({
       </View>
     );
   }
-});
+}
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   navbarContainer: {
     position: 'absolute',
     top: 0,
     left: 0,
     right: 0,
-    height: 64
+    height: 64,
   },
   navbarContainerHidden: {
     position: 'absolute',
     top: -64,
     left: 0,
     right: 0,
-    height: 64
-  }
+    height: 64,
+  },
 });
 
-module.exports = NavBarContainer;
+export default NavBarContainer;
diff --git a/components/NavBarContent.js b/components/NavBarContent.js
index cff57a6..0675b53 100644
--- a/components/NavBarContent.js
+++ b/components/NavBarContent.js
@@ -1,25 +1,29 @@
-'use strict';
+import React from 'react-native';
+import NavButton from './NavButton';
 
-var React = require('react-native');
-var NavButton = require('./NavButton');
-
-var {
+const {
   StyleSheet,
   Text,
   View,
   Animated,
-  Easing
+  Easing,
+  Component,
 } = React;
 
-var NavBarContent = React.createClass({
+class NavBarContent extends Component {
+  constructor(props) {
+    super(props);
+
+    this.goBack = this.goBack.bind(this);
+    this.goForward = this.goForward.bind(this);
+    this.customAction = this.customAction.bind(this);
 
-  getInitialState: function() {
-    return {
-      opacity: this.props.willDisappear ? new Animated.Value(1) : new Animated.Value(0)
+    this.state = {
+      opacity: this.props.willDisappear ? new Animated.Value(1) : new Animated.Value(0),
     };
-  },
+  }
 
-  componentWillReceiveProps: function(newProps) {
+  componentWillReceiveProps(newProps) {
     if (newProps.route !== this.props.route) {
       this.state.opacity.setValue(this.props.willDisappear ? 1 : 0);
 
@@ -30,43 +34,44 @@ var NavBarContent = React.createClass({
             fromValue: this.props.willDisappear ? 1 : 0,
             toValue: this.props.willDisappear ? 0 : 1,
             duration: 300,
-            easing: Easing.easeOutQuad
+            easing: Easing.easeOutQuad,
           }
         ).start();
       }, 0);
     }
-  },
+  }
 
-  goBack: function() {
+  goBack() {
     if (!this.props.willDisappear) {
       this.props.goBack();
     }
-  },
+  }
 
-  goForward: function(route) {
+  goForward(route) {
     this.props.goForward(route);
-  },
+  }
 
-  customAction: function(opts) {
+  customAction(opts) {
     this.props.customAction(opts);
-  },
+  }
 
   render() {
-    var transitionStyle = {
-        opacity: this.state.opacity,
-      },
-      leftCorner,
-      LeftCorner,
-      rightCorner,
-      RightCorner,
-      titleComponent,
-      leftCornerContent,
-      rightCornerContent,
-      titleContent,
-      TitleComponent,
-      trans,
-      width,
-      color;
+    const transitionStyle = {
+      opacity: this.state.opacity,
+    };
+
+    let leftCorner;
+    let LeftCorner;
+    let rightCorner;
+    let RightCorner;
+    let titleComponent;
+    let leftCornerContent;
+    let rightCornerContent;
+    let titleContent;
+    let TitleComponent;
+    let trans;
+    let width;
+    let color;
 
     /**
      * Set leftCorner
@@ -75,9 +80,18 @@ var NavBarContent = React.createClass({
 
     if (this.props.route.leftCorner) {
       LeftCorner = this.props.route.leftCorner;
-      leftCornerContent = <LeftCorner toRoute={this.goForward} customAction={this.customAction} {...this.props.leftProps} {...this.props.route.leftCornerProps} />;
+      leftCornerContent = (
+        <LeftCorner
+          toRoute={this.goForward}
+          customAction={this.customAction}
+          {...this.props.leftProps}
+          {...this.props.route.leftCornerProps}
+        />
+      );
     } else if (this.props.route.index > 0) {
-      leftCornerContent = <NavButton onPress={this.goBack} backButtonComponent={this.props.backButtonComponent} />;
+      leftCornerContent = (
+        <NavButton onPress={this.goBack} backButtonComponent={this.props.backButtonComponent} />
+      );
     }
 
     leftCorner = (
@@ -92,7 +106,14 @@ var NavBarContent = React.createClass({
 
     if (this.props.route.rightCorner || this.props.rightCorner) {
       RightCorner = this.props.route.rightCorner || this.props.rightCorner;
-      rightCornerContent = <RightCorner toRoute={this.goForward} customAction={this.customAction} {...this.props.rightProps} {...this.props.route.rightCornerProps} />;
+      rightCornerContent = (
+        <RightCorner
+          toRoute={this.goForward}
+          customAction={this.customAction}
+          {...this.props.rightProps}
+          {...this.props.route.rightCornerProps}
+        />
+      );
     }
 
     rightCorner = (
@@ -105,7 +126,6 @@ var NavBarContent = React.createClass({
      * Set title message
      */
 
-
     if (this.props.route.titleComponent) {
       TitleComponent = this.props.route.titleComponent;
       titleContent = <TitleComponent {...this.props.titleProps} />;
@@ -118,31 +138,41 @@ var NavBarContent = React.createClass({
     }
 
     titleComponent = (
-      <View style={{flex: 3}}>
+      <View style={{ flex: 3 }}>
         {titleContent}
       </View>
     );
 
-    if(this.props.route.trans === true)
+    if (this.props.route.trans === true) {
       trans = { backgroundColor: 'transparent', borderBottomWidth: 0 };
-    else
+    } else {
       trans = {};
+    }
 
     width = this.props.borderBottomWidth ? this.props.borderBottomWidth : 0;
     color = this.props.borderColor ? this.props.borderColor : null;
 
     return (
-      <Animated.View style={[styles.navbar, transitionStyle, this.props.route.headerStyle,{borderBottomWidth: width, borderColor: color}, trans]}>
+      <Animated.View
+        style={
+          [
+            styles.navbar,
+            transitionStyle,
+            this.props.route.headerStyle,
+            { borderBottomWidth: width, borderColor: color },
+            trans,
+          ]
+        }
+      >
         {leftCorner}
         {titleComponent}
         {rightCorner}
       </Animated.View>
     );
   }
-});
-
+}
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   navbar: {
     position: 'absolute',
     top: 0,
@@ -152,7 +182,7 @@ var styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     flexDirection: 'row',
-    paddingTop: 13
+    paddingTop: 13,
   },
   navbarText: {
     color: 'white',
@@ -169,18 +199,17 @@ var styles = StyleSheet.create({
   },
 
   alignLeft: {
-    alignItems: 'flex-start'
+    alignItems: 'flex-start',
   },
   alignRight: {
-    alignItems: 'flex-end'
+    alignItems: 'flex-end',
   },
   buttonTextLeft: {
     marginLeft: 10,
   },
   buttonTextRight: {
-    marginRight: 10
-  }
+    marginRight: 10,
+  },
 });
 
-
-module.exports = NavBarContent;
+export default NavBarContent;
diff --git a/components/NavButton.js b/components/NavButton.js
index f22e11f..f685110 100644
--- a/components/NavButton.js
+++ b/components/NavButton.js
@@ -1,30 +1,33 @@
-'use strict';
+import React from 'react-native';
 
-var React = require('react-native');
-
-var {
+const {
   StyleSheet,
   Text,
   View,
   TouchableHighlight,
+  Component,
 } = React;
 
+class NavButton extends Component {
+  constructor(props) {
+    super(props);
 
-var NavButton = React.createClass({
+    this.onPress = this.onPress.bind(this);
+  }
 
-  onPress: function() {
+  onPress() {
     this.props.onPress();
-  },
+  }
 
   render() {
-    var backButton,
-      BackButton;
+    let backButton;
+    let BackButton;
 
     if (this.props.backButtonComponent) {
       BackButton = this.props.backButtonComponent;
-      backButton = <View><BackButton/></View>
+      backButton = <View><BackButton/></View>;
     } else {
-      backButton = <Text style={styles.navbarText}>Back</Text>
+      backButton = <Text style={styles.navbarText}>Back</Text>;
     }
 
     return (
@@ -33,10 +36,9 @@ var NavButton = React.createClass({
       </TouchableHighlight>
     );
   }
-});
+}
 
-
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   navbarText: {
     color: 'white',
     fontSize: 16,
@@ -44,8 +46,7 @@ var styles = StyleSheet.create({
     fontWeight: '600',
     textAlign: 'center',
     alignItems: 'center',
-  }
+  },
 });
 
-
-module.exports = NavButton;
+export default NavButton;
diff --git a/index.js b/index.js
index b0ee030..a5d2383 100644
--- a/index.js
+++ b/index.js
@@ -1,32 +1,38 @@
-'use strict';
+import React from 'react-native';
+import { EventEmitter } from 'fbemitter';
 
-var React = require('react-native');
-var {EventEmitter} = require('fbemitter');
+import NavBarContainer from './components/NavBarContainer';
 
-var NavBarContainer = require('./components/NavBarContainer');
-
-var {
+const {
   StyleSheet,
   Navigator,
   StatusBarIOS,
   View,
-  Platform
+  Platform,
 } = React;
 
-class Router extends React.Component{
+class Router extends React.Component {
   constructor(props) {
     super(props);
+
+    this.onForward = this.onForward.bind(this);
+    this.onBack = this.onBack.bind(this);
+    this.customAction = this.customAction.bind(this);
+    this.renderScene = this.renderScene.bind(this);
+    this.onDidFocus = this.onDidFocus.bind(this);
+    this.onWillFocus = this.onWillFocus.bind(this);
+
     this.state = {
       route: {
         name: null,
-        index: null
-      }
+        index: null,
+      },
     };
     this.emitter = new EventEmitter();
   }
 
   onWillFocus(route) {
-    this.setState({ route: route });
+    this.setState({ route });
     this.emitter.emit('willFocus', route.name);
   }
 
@@ -40,9 +46,10 @@ class Router extends React.Component{
     }
   }
 
-  onForward(route, navigator) {
-    route.index = this.state.route.index + 1 || 1;
-    navigator.push(route);
+  onForward(nextRoute, navigator) {
+    navigator.push(
+      Object.assign(nextRoute, { index: this.state.route.index + 1 || 1 })
+    );
   }
 
   setRightProps(props) {
@@ -54,68 +61,70 @@ class Router extends React.Component{
   }
 
   setTitleProps(props) {
-    this.setState({ titleProps: props });   
+    this.setState({ titleProps: props });
   }
 
   customAction(opts) {
     this.props.customAction(opts);
   }
 
-  configureScene(route) {   
-    return route.sceneConfig || Navigator.SceneConfigs.FloatFromRight;    
+  configureScene(route) {
+    return route.sceneConfig || Navigator.SceneConfigs.FloatFromRight;
   }
 
   renderScene(route, navigator) {
-
-    var goForward = function(route) {
-      route.index = this.state.route.index + 1 || 1;
-      navigator.push(route);
+    const goForward = function goForward(nextRoute) {
+      navigator.push(
+        Object.assign(nextRoute, { index: this.state.route.index + 1 || 1 })
+      );
     }.bind(this);
 
-    var replaceRoute = function(route) {
-      route.index = this.state.route.index || 0;
-      navigator.replace(route);
+    const replaceRoute = function replaceRoute(nextRoute) {
+      navigator.replace(
+        Object.assign(nextRoute, { index: this.state.route.index || 0 })
+      );
     }.bind(this);
 
-    var resetToRoute = function(route) {
-      route.index = 0;
-      navigator.resetTo(route);
-    }.bind(this);
+    const resetToRoute = function resetToRoute(nextRoute) {
+      navigator.resetTo(
+        Object.assign(nextRoute, { index: 0 })
+      );
+    };
 
-    var goBackwards = function() {
+    const goBackwards = function goBackwards() {
       this.onBack(navigator);
     }.bind(this);
 
-    var goToFirstRoute = function() {
+    const goToFirstRoute = function goToFirstRoute() {
       navigator.popToTop();
     };
 
-    var setRightProps = function(props) {
+    const setRightProps = function setRightProps(props) {
       this.setState({ rightProps: props });
     }.bind(this);
 
-    var setLeftProps = function(props) {
+    const setLeftProps = function setLeftProps(props) {
       this.setState({ leftProps: props });
     }.bind(this);
 
-    var setTitleProps = function(props) {    
-      this.setState({ titleProps: props });   
-    }.bind(this); 
+    const setTitleProps = function setTitleProps(props) {
+      this.setState({ titleProps: props });
+    }.bind(this);
 
-    var customAction = function(opts) {
+    const customAction = function customAction(opts) {
       this.customAction(opts);
     }.bind(this);
 
-    var Content = route.component;
+    const Content = route.component;
 
     // Remove the margin of the navigation bar if not using navigation bar
-    var extraStyling = {};
+    const extraStyling = {};
     if (this.props.hideNavigationBar) {
       extraStyling.marginTop = 0;
     }
 
-    var margin;
-    if(route.trans) {
+    let margin;
+    if (route.trans) {
       margin = 0;
     } else if (this.props.hideNavigationBar || route.hideNavigationBar) {
       margin = this.props.noStatusBar ? 0 : 20;
@@ -125,7 +134,7 @@ class Router extends React.Component{
 
     return (
       <View
-        style={[styles.container, this.props.bgStyle, extraStyling, {marginTop: margin}]}>
+        style={[styles.container, this.props.bgStyle, extraStyling, { marginTop: margin }]}>
         <Content
           name={route.name}
           index={route.index}
@@ -144,11 +153,10 @@ class Router extends React.Component{
         />
       </View>
     );
-
   }
 
   render() {
-    var navigationBar;
+    let navigationBar;
     // Status bar color
     if (Platform.OS === 'ios') {
       if (this.props.statusBarColor === 'black') {
@@ -161,44 +169,45 @@ class Router extends React.Component{
     }
 
     if (!this.props.hideNavigationBar) {
-      navigationBar =
-      <NavBarContainer
-        style={this.props.headerStyle}
-        navigator={navigator}
-        currentRoute={this.state.route}
-        backButtonComponent={this.props.backButtonComponent}
-        rightCorner={this.props.rightCorner}
-        titleStyle={this.props.titleStyle}
-        borderBottomWidth={this.props.borderBottomWidth}
-        borderColor={this.props.borderColor}
-        toRoute={this.onForward.bind(this)}
-        toBack={this.onBack.bind(this)}
-        leftProps={this.state.leftProps}
-        rightProps={this.state.rightProps}
-        titleProps={this.state.titleProps}
-        customAction={this.customAction.bind(this)}
-      />
+      navigationBar = (
+        <NavBarContainer
+          style={this.props.headerStyle}
+          navigator={navigator}
+          currentRoute={this.state.route}
+          backButtonComponent={this.props.backButtonComponent}
+          rightCorner={this.props.rightCorner}
+          titleStyle={this.props.titleStyle}
+          borderBottomWidth={this.props.borderBottomWidth}
+          borderColor={this.props.borderColor}
+          toRoute={this.onForward}
+          toBack={this.onBack}
+          leftProps={this.state.leftProps}
+          rightProps={this.state.rightProps}
+          titleProps={this.state.titleProps}
+          customAction={this.customAction}
+        />
+      );
     }
 
     return (
       <Navigator
-        ref='navigator'
+        ref="navigator"
         initialRoute={this.props.firstRoute}
         navigationBar={navigationBar}
-        renderScene={this.renderScene.bind(this)}
-        onDidFocus={this.onDidFocus.bind(this)}
-        onWillFocus={this.onWillFocus.bind(this)}
+        renderScene={this.renderScene}
+        onDidFocus={this.onDidFocus}
+        onWillFocus={this.onWillFocus}
         configureScene={this.configureScene}
       />
     );
   }
 }
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#FFFFFF'
+    backgroundColor: '#FFFFFF',
   },
 });
 
-module.exports = Router;
+export default Router;