Migrate to native animation

Author: sangotaro

index.js

@@ -56,10 +56,12 @@ const ScrollableTabView = React.createClass({
   },
 
   getInitialState() {
+    const width = Dimensions.get('window').width;
     return {
       currentPage: this.props.initialPage,
+      scrollX: new Animated.Value(this.props.initialPage * width),
       scrollValue: new Animated.Value(this.props.initialPage),
-      containerWidth: Dimensions.get('window').width,
+      containerWidth: width,
       sceneKeys: this.newSceneKeys({ currentPage: this.props.initialPage, }),
     };
   },
@@ -74,6 +76,12 @@ const ScrollableTabView = React.createClass({
     this.setTimeout(() => {
       InteractionManager.runAfterInteractions(scrollFn);
     }, 0);
+
+    this.state.scrollX.addListener(({ value, }) => {
+      const scrollValue = value / this.state.containerWidth;
+      this.state.scrollValue.setValue(scrollValue);
+      this.props.onScroll(scrollValue);
+    });
   },
 
   componentWillReceiveProps(props) {
@@ -142,16 +150,19 @@ const ScrollableTabView = React.createClass({
 
   renderScrollableContent() {
     const scenes = this._composeScenes();
-    return <ScrollView
+    return <Animated.ScrollView
       horizontal
       pagingEnabled
       automaticallyAdjustContentInsets={false}
       contentOffset={{ x: this.props.initialPage * this.state.containerWidth, }}
       ref={(scrollView) => { this.scrollView = scrollView; }}
-      onScroll={(e) => {
-        const offsetX = e.nativeEvent.contentOffset.x;
-        this._updateScrollValue(offsetX / this.state.containerWidth);
-      }}
+      onScroll={
+        Animated.event([{
+              nativeEvent: { contentOffset: { x: this.state.scrollX } }
+            }], {
+              useNativeDriver: true,
+            })
+      }
       onMomentumScrollBegin={this._onMomentumScrollBeginAndEnd}
       onMomentumScrollEnd={this._onMomentumScrollBeginAndEnd}
       scrollEventThrottle={16}
@@ -164,7 +175,7 @@ const ScrollableTabView = React.createClass({
       {...this.props.contentProps}
       >
       {scenes}
-    </ScrollView>;
+    </Animated.ScrollView>;
   },
 
   _composeScenes() {
@@ -209,11 +220,6 @@ const ScrollableTabView = React.createClass({
     });
   },
 
-  _updateScrollValue(value) {
-    this.state.scrollValue.setValue(value);
-    this.props.onScroll(value);
-  },
-
   _handleLayout(e) {
     const { width, } = e.nativeEvent.layout;
 
@@ -235,6 +241,7 @@ const ScrollableTabView = React.createClass({
       goToPage: this.goToPage,
       tabs: this._children().map((child) => child.props.tabLabel),
       activeTab: this.state.currentPage,
+      scrollX: this.state.scrollX,
       scrollValue: this.state.scrollValue,
       containerWidth: this.state.containerWidth,
     };