diff --git a/DefaultViewPageIndicator.js b/DefaultViewPageIndicator.js
index 320d4a2..8cef4c7 100644
--- a/DefaultViewPageIndicator.js
+++ b/DefaultViewPageIndicator.js
@@ -1,68 +1,74 @@
-'use strict';
+"use strict";
 
-var React = require('react');
-var ReactNative = require('react-native');
+var React = require("react");
+var ReactNative = require("react-native");
+var PropTypes = require("prop-types");
+var createReactClass = require("create-react-class");
 var {
   Dimensions,
   StyleSheet,
   Text,
   TouchableOpacity,
   View,
-  Animated,
+  Animated
 } = ReactNative;
 
-var deviceWidth = Dimensions.get('window').width;
+var deviceWidth = Dimensions.get("window").width;
 var DOT_SIZE = 6;
 var DOT_SAPCE = 4;
 
 var styles = StyleSheet.create({
   tab: {
-    alignItems: 'center',
+    alignItems: "center"
   },
 
   tabs: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center"
   },
 
   dot: {
     width: DOT_SIZE,
     height: DOT_SIZE,
     borderRadius: DOT_SIZE / 2,
-    backgroundColor: '#E0E1E2',
+    backgroundColor: "#E0E1E2",
     marginLeft: DOT_SAPCE,
-    marginRight: DOT_SAPCE,
+    marginRight: DOT_SAPCE
   },
 
   curDot: {
-    position: 'absolute',
+    position: "absolute",
     width: DOT_SIZE,
     height: DOT_SIZE,
     borderRadius: DOT_SIZE / 2,
-    backgroundColor: '#80ACD0',
+    backgroundColor: "#80ACD0",
     margin: DOT_SAPCE,
-    bottom: 0,
-  },
+    bottom: 0
+  }
 });
 
-var DefaultViewPageIndicator = React.createClass({
+var DefaultViewPageIndicator = createReactClass({
   propTypes: {
-    goToPage: React.PropTypes.func,
-    activePage: React.PropTypes.number,
-    pageCount: React.PropTypes.number
+    goToPage: PropTypes.func,
+    activePage: PropTypes.number,
+    pageCount: PropTypes.number
   },
 
   getInitialState() {
     return {
-      viewWidth: 0,
+      viewWidth: 0
     };
   },
 
   renderIndicator(page) {
     //var isTabActive = this.props.activePage === page;
     return (
-      <TouchableOpacity style={styles.tab} key={'idc_' + page} onPress={() => this.props.goToPage(page)}>
+      <TouchableOpacity
+        style={styles.tab}
+        key={"idc_" + page}
+        onPress={() => this.props.goToPage(page)}
+      >
         <View style={styles.dot} />
       </TouchableOpacity>
     );
@@ -70,36 +76,41 @@ var DefaultViewPageIndicator = React.createClass({
 
   render() {
     var pageCount = this.props.pageCount;
-    var itemWidth = DOT_SIZE + (DOT_SAPCE * 2);
-    var offset = (this.state.viewWidth - itemWidth * pageCount) / 2 + itemWidth * this.props.activePage;
+    var itemWidth = DOT_SIZE + DOT_SAPCE * 2;
+    var offset =
+      (this.state.viewWidth - itemWidth * pageCount) / 2 +
+      itemWidth * this.props.activePage;
 
     //var left = offset;
     var offsetX = itemWidth * (this.props.activePage - this.props.scrollOffset);
     var left = this.props.scrollValue.interpolate({
-      inputRange: [0, 1], outputRange: [offsetX, offsetX + itemWidth]
-    })
+      inputRange: [0, 1],
+      outputRange: [offsetX, offsetX + itemWidth]
+    });
 
     var indicators = [];
     for (var i = 0; i < pageCount; i++) {
-      indicators.push(this.renderIndicator(i))
+      indicators.push(this.renderIndicator(i));
     }
 
     return (
-      <View style={styles.tabs}
-        onLayout={(event) => {
-            var viewWidth = event.nativeEvent.layout.width;
-            if (!viewWidth || this.state.viewWidth === viewWidth) {
-              return;
-            }
-            this.setState({
-              viewWidth: viewWidth,
-            });
-          }}>
+      <View
+        style={styles.tabs}
+        onLayout={event => {
+          var viewWidth = event.nativeEvent.layout.width;
+          if (!viewWidth || this.state.viewWidth === viewWidth) {
+            return;
+          }
+          this.setState({
+            viewWidth: viewWidth
+          });
+        }}
+      >
         {indicators}
-        <Animated.View style={[styles.curDot, {left}]} />
+        <Animated.View style={[styles.curDot, { left }]} />
       </View>
     );
-  },
+  }
 });
 
 module.exports = DefaultViewPageIndicator;
diff --git a/ViewPager.js b/ViewPager.js
index d2922fd..a0673d9 100644
--- a/ViewPager.js
+++ b/ViewPager.js
@@ -1,9 +1,10 @@
-'use strict';
+"use strict";
 
-var React = require('react');
-var PropTypes = require('prop-types');
+var React = require("react");
+var PropTypes = require("prop-types");
 
-var ReactNative = require('react-native');
+var ReactNative = require("react-native");
+var createReactClass = require("create-react-class");
 var {
   Dimensions,
   Text,
@@ -11,21 +12,21 @@ var {
   TouchableOpacity,
   PanResponder,
   Animated,
-  StyleSheet,
+  StyleSheet
 } = ReactNative;
 
-var StaticRenderer = require('react-native/Libraries/Components/StaticRenderer');
-var TimerMixin = require('react-timer-mixin');
+var StaticRenderer = require("react-native/Libraries/Components/StaticRenderer");
+var TimerMixin = require("react-timer-mixin");
 
-var DefaultViewPageIndicator = require('./DefaultViewPageIndicator');
-var deviceWidth = Dimensions.get('window').width;
-var ViewPagerDataSource = require('./ViewPagerDataSource');
+var DefaultViewPageIndicator = require("./DefaultViewPageIndicator");
+var deviceWidth = Dimensions.get("window").width;
+var ViewPagerDataSource = require("./ViewPagerDataSource");
 
-var ViewPager = React.createClass({
+var ViewPager = createReactClass({
   mixins: [TimerMixin],
 
   statics: {
-    DataSource: ViewPagerDataSource,
+    DataSource: ViewPagerDataSource
   },
 
   propTypes: {
@@ -33,15 +34,12 @@ var ViewPager = React.createClass({
     dataSource: PropTypes.instanceOf(ViewPagerDataSource).isRequired,
     renderPage: PropTypes.func.isRequired,
     onChangePage: PropTypes.func,
-    renderPageIndicator: PropTypes.oneOfType([
-      PropTypes.func,
-      PropTypes.bool
-    ]),
+    renderPageIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
     isLoop: PropTypes.bool,
     locked: PropTypes.bool,
     autoPlay: PropTypes.bool,
     animation: PropTypes.func,
-    initialPage: PropTypes.number,
+    initialPage: PropTypes.number
   },
 
   fling: false,
@@ -51,14 +49,13 @@ var ViewPager = React.createClass({
       isLoop: false,
       locked: false,
       animation: function(animate, toValue, gs) {
-        return Animated.spring(animate,
-          {
-            toValue: toValue,
-            friction: 10,
-            tension: 50,
-          })
-      },
-    }
+        return Animated.spring(animate, {
+          toValue: toValue,
+          friction: 10,
+          tension: 50
+        });
+      }
+    };
   },
 
   getInitialState() {
@@ -74,28 +71,37 @@ var ViewPager = React.createClass({
 
     var release = (e, gestureState) => {
       var relativeGestureDistance = gestureState.dx / deviceWidth,
-          //lastPageIndex = this.props.children.length - 1,
-          vx = gestureState.vx;
+        //lastPageIndex = this.props.children.length - 1,
+        vx = gestureState.vx;
 
       var step = 0;
-      if (relativeGestureDistance < -0.5 || (relativeGestureDistance < 0 && vx <= -1e-6)) {
+      if (
+        relativeGestureDistance < -0.5 ||
+        (relativeGestureDistance < 0 && vx <= -1e-6)
+      ) {
         step = 1;
-      } else if (relativeGestureDistance > 0.5 || (relativeGestureDistance > 0 && vx >= 1e-6)) {
+      } else if (
+        relativeGestureDistance > 0.5 ||
+        (relativeGestureDistance > 0 && vx >= 1e-6)
+      ) {
         step = -1;
       }
 
       this.props.hasTouch && this.props.hasTouch(false);
 
       this.movePage(step, gestureState);
-    }
+    };
 
     this._panResponder = PanResponder.create({
       // Claim responder if it's a horizontal pan
       onMoveShouldSetPanResponder: (e, gestureState) => {
         if (Math.abs(gestureState.dx) > Math.abs(gestureState.dy)) {
-          if (/* (gestureState.moveX <= this.props.edgeHitWidth ||
+          if (
+            /* (gestureState.moveX <= this.props.edgeHitWidth ||
               gestureState.moveX >= deviceWidth - this.props.edgeHitWidth) && */
-                this.props.locked !== true && !this.fling) {
+            this.props.locked !== true &&
+            !this.fling
+          ) {
             this.props.hasTouch && this.props.hasTouch(true);
             return true;
           }
@@ -111,14 +117,14 @@ var ViewPager = React.createClass({
         var dx = gestureState.dx;
         var offsetX = -dx / this.state.viewWidth + this.childIndex;
         this.state.scrollValue.setValue(offsetX);
-      },
+      }
     });
 
     if (this.props.isLoop) {
       this.childIndex = 1;
       this.state.scrollValue.setValue(1);
     }
-    if(this.props.initialPage){
+    if (this.props.initialPage) {
       var initialPage = Number(this.props.initialPage);
       if (initialPage > 0) {
         this.goToPage(initialPage, false);
@@ -144,9 +150,12 @@ var ViewPager = React.createClass({
 
     if (nextProps.dataSource) {
       var maxPage = nextProps.dataSource.getPageCount() - 1;
-      var constrainedPage = Math.max(0, Math.min(this.state.currentPage, maxPage));
+      var constrainedPage = Math.max(
+        0,
+        Math.min(this.state.currentPage, maxPage)
+      );
       this.setState({
-        currentPage: constrainedPage,
+        currentPage: constrainedPage
       });
 
       if (!nextProps.isLoop) {
@@ -156,24 +165,21 @@ var ViewPager = React.createClass({
       this.childIndex = Math.min(this.childIndex, constrainedPage);
       this.fling = false;
     }
-
   },
 
   _startAutoPlay() {
     if (!this._autoPlayer) {
-      this._autoPlayer = this.setInterval(
-        () => {this.movePage(1);},
-        5000
-      );
+      this._autoPlayer = this.setInterval(() => {
+        this.movePage(1);
+      }, 5000);
     }
   },
 
   goToPage(pageNumber, animate = true) {
-
     var pageCount = this.props.dataSource.getPageCount();
     if (pageNumber < 0 || pageNumber >= pageCount) {
-      console.error('Invalid page number: ', pageNumber);
-      return
+      console.error("Invalid page number: ", pageNumber);
+      return;
     }
 
     var step = pageNumber - this.state.currentPage;
@@ -184,32 +190,38 @@ var ViewPager = React.createClass({
     var pageCount = this.props.dataSource.getPageCount();
     var pageNumber = this.state.currentPage + step;
     if (this.props.isLoop) {
-      pageNumber = pageCount == 0 ? pageNumber = 0 : ((pageNumber + pageCount) % pageCount);
+      pageNumber =
+        pageCount == 0
+          ? (pageNumber = 0)
+          : (pageNumber + pageCount) % pageCount;
     } else {
       pageNumber = Math.min(Math.max(0, pageNumber), pageCount - 1);
     }
 
     const moved = pageNumber !== this.state.currentPage;
     const scrollStep = (moved ? step : 0) + this.childIndex;
-    const nextChildIdx = (pageNumber > 0 || this.props.isLoop) ? 1 : 0;
+    const nextChildIdx = pageNumber > 0 || this.props.isLoop ? 1 : 0;
 
     const postChange = () => {
       this.fling = false;
       this.childIndex = nextChildIdx;
       this.state.scrollValue.setValue(nextChildIdx);
       this.setState({
-        currentPage: pageNumber,
+        currentPage: pageNumber
       });
     };
 
     if (animate) {
       this.fling = true;
-      this.props.animation(this.state.scrollValue, scrollStep, gs)
-        .start((event) => {
+      this.props
+        .animation(this.state.scrollValue, scrollStep, gs)
+        .start(event => {
           if (event.finished) {
             postChange();
           }
-          moved && this.props.onChangePage && this.props.onChangePage(pageNumber);
+          moved &&
+            this.props.onChangePage &&
+            this.props.onChangePage(pageNumber);
         });
     } else {
       postChange();
@@ -235,12 +247,12 @@ var ViewPager = React.createClass({
     }
   },
 
-  _getPage(pageIdx: number, loop:boolean) {
+  _getPage(pageIdx: number, loop: boolean) {
     var dataSource = this.props.dataSource;
     var pageID = dataSource.pageIdentities[pageIdx];
     return (
       <StaticRenderer
-        key={'p_' + pageID + (loop ? '_1' : '')}
+        key={"p_" + pageID + (loop ? "_1" : "")}
         shouldUpdate={true}
         render={this.props.renderPage.bind(
           null,
@@ -262,7 +274,7 @@ var ViewPager = React.createClass({
     var hasLeft = false;
     var viewWidth = this.state.viewWidth;
 
-    if(pageIDs.length > 0 && viewWidth > 0) {
+    if (pageIDs.length > 0 && viewWidth > 0) {
       // left page
       if (this.state.currentPage > 0) {
         bodyComponents.push(this._getPage(this.state.currentPage - 1));
@@ -282,7 +294,10 @@ var ViewPager = React.createClass({
       if (this.state.currentPage < pageIDs.length - 1) {
         bodyComponents.push(this._getPage(this.state.currentPage + 1));
         pagesNum++;
-      } else if (this.state.currentPage == pageIDs.length - 1 && this.props.isLoop) {
+      } else if (
+        this.state.currentPage == pageIDs.length - 1 &&
+        this.props.isLoop
+      ) {
         bodyComponents.push(this._getPage(0, true));
         pagesNum++;
       }
@@ -291,41 +306,45 @@ var ViewPager = React.createClass({
     var sceneContainerStyle = {
       width: viewWidth * pagesNum,
       flex: 1,
-      flexDirection: 'row'
+      flexDirection: "row"
     };
 
     // this.childIndex = hasLeft ? 1 : 0;
     // this.state.scrollValue.setValue(this.childIndex);
     var translateX = this.state.scrollValue.interpolate({
-      inputRange: [0, 1], outputRange: [0, -viewWidth]
+      inputRange: [0, 1],
+      outputRange: [0, -viewWidth]
     });
 
     return (
-      <View style={{flex: 1}}
-        onLayout={(event) => {
-            // console.log('ViewPager.onLayout()');
-            var viewWidth = event.nativeEvent.layout.width;
-            if (!viewWidth || this.state.viewWidth === viewWidth) {
-              return;
-            }
-            this.setState({
-              currentPage: this.state.currentPage,
-              viewWidth: viewWidth,
-            });
-          }}
+      <View
+        style={{ flex: 1 }}
+        onLayout={event => {
+          // console.log('ViewPager.onLayout()');
+          var viewWidth = event.nativeEvent.layout.width;
+          if (!viewWidth || this.state.viewWidth === viewWidth) {
+            return;
+          }
+          this.setState({
+            currentPage: this.state.currentPage,
+            viewWidth: viewWidth
+          });
+        }}
+      >
+        <Animated.View
+          style={[sceneContainerStyle, { transform: [{ translateX }] }]}
+          {...this._panResponder.panHandlers}
         >
-
-        <Animated.View style={[sceneContainerStyle, {transform: [{translateX}]}]}
-          {...this._panResponder.panHandlers}>
           {bodyComponents}
         </Animated.View>
 
-        {this.renderPageIndicator({goToPage: this.goToPage,
-                            pageCount: pageIDs.length,
-                            activePage: this.state.currentPage,
-                            scrollValue: this.state.scrollValue,
-                            scrollOffset: this.childIndex,
-                          })}
+        {this.renderPageIndicator({
+          goToPage: this.goToPage,
+          pageCount: pageIDs.length,
+          activePage: this.state.currentPage,
+          scrollValue: this.state.scrollValue,
+          scrollOffset: this.childIndex
+        })}
       </View>
     );
   }
@@ -334,13 +353,13 @@ var ViewPager = React.createClass({
 var styles = StyleSheet.create({
   indicators: {
     flex: 1,
-    alignItems: 'center',
-    position: 'absolute',
+    alignItems: "center",
+    position: "absolute",
     bottom: 10,
     left: 0,
     right: 0,
-    backgroundColor: 'transparent',
-  },
+    backgroundColor: "transparent"
+  }
 });
 
 module.exports = ViewPager;