diff --git a/Example/index.android.js b/Example/index.android.js
index a88bcdf..fac5340 100644
--- a/Example/index.android.js
+++ b/Example/index.android.js
@@ -1,47 +1,13 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- */
-'use strict';
-
-var React = require('react-native');
-var {
+import React from 'react';
+import {
   AppRegistry,
   StyleSheet,
   Text,
   View,
-} = React;
-var Tabs = require('react-native-tabs');
-
-class Example extends React.Component {
-  constructor(props){
-    super(props);
-    this.state = {};
-  }
-  render() {
-    var self = this;
-    return (
-      <View style={styles.container}>
-        <Text style={styles.welcome}>
-          Welcome to React Native!
-        </Text>
-        <Text style={styles.instructions}>
-          Selected page: {this.state.page}
-        </Text>
-        <Tabs selected="second" style={{backgroundColor:'white'}}
-              onSelect={function(el){self.setState({page: el.props.name});return {style:{color:'red'}}}}>
-            <Text name="first">First</Text>
-            <Text name="second">Second</Text>
-            <Text name="third">Third</Text>
-            <Text name="fourth">Fourth</Text>
-            <Text name="fifth">Fifth</Text>
-        </Tabs>
-      </View>
-    );
-  }
-}
+} from 'react-native';
+import Tabs from 'react-native-tabs';
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: 'center',
@@ -60,4 +26,40 @@ var styles = StyleSheet.create({
   },
 });
 
+class Example extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { page: 'second' };
+  }
+  render() {
+    return (
+      <View style={styles.container}>
+        <Tabs
+          selected={this.state.page}
+          style={{ backgroundColor: 'white' }}
+          selectedStyle={{ color: 'red' }} onSelect={el => this.setState({ page: el.props.name })}
+          pressOpacity={1}
+        >
+          <Text name="first">First</Text>
+          <Text
+            name="second"
+            selectedIconStyle={{ borderTopWidth: 2, borderTopColor: 'red' }}
+          >
+            Second
+          </Text>
+          <Text name="third">Third</Text>
+          <Text name="fourth" selectedStyle={{ color: 'green' }}>Fourth</Text>
+          <Text name="fifth">Fifth</Text>
+        </Tabs>
+        <Text style={styles.welcome}>
+          Welcome to React Native
+        </Text>
+        <Text style={styles.instructions}>
+          Selected page: {this.state.page}
+        </Text>
+      </View>
+    );
+  }
+}
+
 AppRegistry.registerComponent('Example', () => Example);
diff --git a/Example/index.ios.js b/Example/index.ios.js
index 193861d..fac5340 100644
--- a/Example/index.ios.js
+++ b/Example/index.ios.js
@@ -1,48 +1,13 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- */
-'use strict';
-
-var React = require('react-native');
-var {
+import React from 'react';
+import {
   AppRegistry,
   StyleSheet,
   Text,
   View,
-} = React;
-var Tabs = require('react-native-tabs');
-
-class Example extends React.Component {
-  constructor(props){
-    super(props);
-    this.state = {page:'second'};
-  }
-  render() {
-    var self = this;
-    return (
-      <View style={styles.container}>
-        <Tabs selected={this.state.page} style={{backgroundColor:'white'}}
-              selectedStyle={{color:'red'}} onSelect={el=>this.setState({page:el.props.name})}
-              pressOpacity={1}>
-            <Text name="first">First</Text>
-            <Text name="second" selectedIconStyle={{borderTopWidth:2,borderTopColor:'red'}}>Second</Text>
-            <Text name="third">Third</Text>
-            <Text name="fourth" selectedStyle={{color:'green'}}>Fourth</Text>
-            <Text name="fifth">Fifth</Text>
-        </Tabs>
-          <Text style={styles.welcome}>
-              Welcome to React Native
-          </Text>
-          <Text style={styles.instructions}>
-              Selected page: {this.state.page}
-          </Text>
-      </View>
-    );
-  }
-}
+} from 'react-native';
+import Tabs from 'react-native-tabs';
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: 'center',
@@ -61,4 +26,40 @@ var styles = StyleSheet.create({
   },
 });
 
+class Example extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { page: 'second' };
+  }
+  render() {
+    return (
+      <View style={styles.container}>
+        <Tabs
+          selected={this.state.page}
+          style={{ backgroundColor: 'white' }}
+          selectedStyle={{ color: 'red' }} onSelect={el => this.setState({ page: el.props.name })}
+          pressOpacity={1}
+        >
+          <Text name="first">First</Text>
+          <Text
+            name="second"
+            selectedIconStyle={{ borderTopWidth: 2, borderTopColor: 'red' }}
+          >
+            Second
+          </Text>
+          <Text name="third">Third</Text>
+          <Text name="fourth" selectedStyle={{ color: 'green' }}>Fourth</Text>
+          <Text name="fifth">Fifth</Text>
+        </Tabs>
+        <Text style={styles.welcome}>
+          Welcome to React Native
+        </Text>
+        <Text style={styles.instructions}>
+          Selected page: {this.state.page}
+        </Text>
+      </View>
+    );
+  }
+}
+
 AppRegistry.registerComponent('Example', () => Example);
diff --git a/index.js b/index.js
index 6d82fe2..c9fb7fe 100644
--- a/index.js
+++ b/index.js
@@ -1,69 +1,92 @@
-'use strict';
-
 import React, {
-    Component
+  PropTypes,
+  Component,
 } from 'react';
-
 import {
-    StyleSheet,
-    View,
-    Text,
-    TouchableOpacity,
+  StyleSheet,
+  View,
+  Text,
+  TouchableOpacity,
 } from 'react-native';
 
+const styles = StyleSheet.create({
+  tabbarView: {
+    position: 'absolute',
+    bottom: 0,
+    right: 0,
+    left: 0,
+    height: 50,
+    opacity: 1,
+    backgroundColor: 'transparent',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  iconView: {
+    flex: 1,
+    height: 50,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+const propTypes = {
+  onSelect: PropTypes.func,
+  selected: PropTypes.string,
+  children: PropTypes.array,
+  style: View.propTypes.style,
+  iconStyle: Text.propTypes.style,
+  selectedIconStyle: Text.propTypes.style,
+  selectedStyle: Text.propTypes.style,
+};
+
 class Tabs extends Component {
-    onSelect(el){
-        if (el.props.onSelect) {
-            el.props.onSelect(el);
-        } else if (this.props.onSelect) {
-            this.props.onSelect(el);
-        }
+
+  onSelect(el) {
+    if (el.props.onSelect) {
+      el.props.onSelect(el);
+    } else if (this.props.onSelect) {
+      this.props.onSelect(el);
     }
+  }
 
-    render(){
-        const self = this;
-        let selected = this.props.selected
-        if (!selected){
-            React.Children.forEach(this.props.children.filter(c=>c), el=>{
-                if (!selected || el.props.initial){
-                    selected = el.props.name || el.key;
-                }
-            });
+  render() {
+    const self = this;
+    let selected = this.props.selected;
+    if (!selected) {
+      React.Children.forEach(this.props.children.filter(c => c), el => {
+        if (!selected || el.props.initial) {
+          selected = el.props.name || el.key;
         }
-        return (
-            <View style={[styles.tabbarView, this.props.style]}>
-                {React.Children.map(this.props.children.filter(c=>c),(el)=>
-                    <TouchableOpacity key={el.props.name+"touch"}
-                       style={[styles.iconView, this.props.iconStyle, (el.props.name || el.key) == selected ? this.props.selectedIconStyle || el.props.selectedIconStyle || {} : {} ]}
-                       onPress={()=>!self.props.locked && self.onSelect(el)}
-                       onLongPress={()=>self.onSelect(el)}
-                       activeOpacity={el.props.pressOpacity}>
-                         {selected == (el.props.name || el.key) ? React.cloneElement(el, {selected: true, style: [el.props.style, this.props.selectedStyle, el.props.selectedStyle]}) : el}
-                    </TouchableOpacity>
-                )}
-            </View>
-        );
+      });
     }
+    return (
+      <View style={[styles.tabbarView, this.props.style]}>
+        {React.Children.map(this.props.children.filter(c => c), (el) =>
+          <TouchableOpacity
+            key={`${el.props.name}touch`}
+            style={[
+              styles.iconView,
+              this.props.iconStyle,
+              (el.props.name || el.key) === selected ?
+                this.props.selectedIconStyle || el.props.selectedIconStyle || {} : {}]}
+            onPress={() => !self.props.locked && self.onSelect(el)}
+            onLongPress={() => self.onSelect(el)}
+            activeOpacity={el.props.pressOpacity}
+          >
+            {selected === (el.props.name || el.key) ?
+              React.cloneElement(el, {
+                selected: true,
+                style: [el.props.style, this.props.selectedStyle, el.props.selectedStyle],
+              }) : el
+            }
+          </TouchableOpacity>
+        )}
+      </View>
+    );
+  }
 }
-var styles = StyleSheet.create({
-    tabbarView: {
-        position:'absolute',
-        bottom:0,
-        right:0,
-        left:0,
-        height:50,
-        opacity:1,
-        backgroundColor:'transparent',
-        flexDirection: 'row',
-        justifyContent: 'center',
-        alignItems: 'center'
-    },
-    iconView: {
-        flex: 1,
-        height: 50,
-        justifyContent: 'center',
-        alignItems: 'center',
-    }
-});
 
-module.exports = Tabs;
+Tabs.propTypes = propTypes;
+
+export default Tabs;