Update selected page on swiping

Author: brentvatne

index.js

@@ -66,23 +66,34 @@ var ScrollableTabView = React.createClass({
     if (Platform.OS === 'ios') {
       return (
         <ScrollView
+          horizontal
+          pagingEnabled
           style={styles.scrollableContentIOS}
-          horizontal={true}
           ref={(scrollView) => { this.scrollView = scrollView }}
           onScroll={(e) => {
             var offsetX = e.nativeEvent.contentOffset.x;
             this._updateScrollValue(offsetX / deviceWidth);
           }}
+          onMomentumScrollBegin={(e) => {
+            var offsetX = e.nativeEvent.contentOffset.x;
+            this._updateSelectedPage(parseInt(offsetX / deviceWidth));
+          }}
+          onMomentumScrollEnd={(e) => {
+            var offsetX = e.nativeEvent.contentOffset.x;
+            this._updateSelectedPage(parseInt(offsetX / deviceWidth));
+          }}
           scrollEventThrottle={16}
-          directionalLockEnabled={true}
-          pagingEnabled={true}>
+          showsHorizontalScrollIndicator={false}
+          directionalLockEnabled
+          alwaysBounceVertical={false}>
           {this.props.children}
         </ScrollView>
       );
     } else {
       return (
         <ViewPagerAndroid
          style={styles.scrollableContentAndroid}
+         onPageSelected={this._updateSelectedPage}
          onPageScroll={(e) => {
            const {offset, position} = e.nativeEvent;
            this._updateScrollValue(position + offset);
@@ -96,6 +107,13 @@ var ScrollableTabView = React.createClass({
     }
   },
 
+  _updateSelectedPage(currentPage) {
+    if (typeof currentPage === 'object') {
+      currentPage = currentPage.nativeEvent.position;
+    }
+    this.setState({currentPage});
+  },
+
   _updateScrollValue(value) {
     this.state.scrollValue.setValue(value);
   },