Use Animated for TabBar's too

Author: devknoll

DefaultTabBar.js

@@ -7,11 +7,10 @@ var {
   Text,
   TouchableOpacity,
   View,
+  Animated,
 } = React;
 
 var deviceWidth = Dimensions.get('window').width;
-var precomputeStyle = require('precomputeStyle');
-var TAB_UNDERLINE_REF = 'TAB_UNDERLINE';
 
 var styles = StyleSheet.create({
   tab: {
@@ -52,12 +51,6 @@ var DefaultTabBar = React.createClass({
     );
   },
 
-  setAnimationValue(value) {
-    this.refs[TAB_UNDERLINE_REF].setNativeProps(precomputeStyle({
-      left: (deviceWidth * value) / this.props.tabs.length
-    }));
-  },
-
   render() {
     var numberOfTabs = this.props.tabs.length;
     var tabUnderlineStyle = {
@@ -68,10 +61,14 @@ var DefaultTabBar = React.createClass({
       bottom: 0,
     };
 
+    var left = this.props.scrollValue.interpolate({
+      inputRange: [0, 1], outputRange: [0, deviceWidth / numberOfTabs]
+    });
+
     return (
       <View style={styles.tabs}>
         {this.props.tabs.map((tab, i) => this.renderTabOption(tab, i))}
-        <View style={tabUnderlineStyle} ref={TAB_UNDERLINE_REF} />
+        <Animated.View style={[tabUnderlineStyle, {left}]} />
       </View>
     );
   },

index.js

@@ -12,7 +12,6 @@ var {
 
 var DefaultTabBar = require('./DefaultTabBar');
 var deviceWidth = Dimensions.get('window').width;
-var TAB_BAR_REF = 'TAB_BAR';
 
 var ScrollableTabView = React.createClass({
   getDefaultProps() {
@@ -26,15 +25,11 @@ var ScrollableTabView = React.createClass({
   },
 
   componentWillMount() {
-    this.state.scrollValue.addListener(({value}) => {
-      this.refs[TAB_BAR_REF] &&
-        this.refs[TAB_BAR_REF].setAnimationValue(value);
-    });
-
     var release = (e, gestureState) => {
       var relativeGestureDistance = gestureState.dx / deviceWidth,
           lastPageIndex = this.props.children.length - 1,
-          vx = gestureState.vx;
+          vx = gestureState.vx,
+          newPage = this.state.currentPage;
 
       if (relativeGestureDistance < -0.5 || (relativeGestureDistance < 0 && vx <= 0.5)) {
         newPage = newPage + 1;
@@ -43,7 +38,7 @@ var ScrollableTabView = React.createClass({
       }
 
       this.props.hasTouch && this.props.hasTouch(false);
-      this.goToPage(newPage);
+      this.goToPage(Math.max(0, Math.min(newPage, this.props.children.length - 1)));
     }
 
     this._panResponder = PanResponder.create({
@@ -79,14 +74,14 @@ var ScrollableTabView = React.createClass({
   },
 
   goToPage(pageNumber) {
-    if (this.props.currentPage == pageNumber) {
-      return;
-    }
-
     this.props.onChangeTab && this.props.onChangeTab({
       i: pageNumber, ref: this.props.children[pageNumber]
     });
 
+    this.setState({
+      currentPage: pageNumber
+    });
+
     Animated.spring(this.state.scrollValue, {toValue: pageNumber, friction: 10, tension: 50}).start();
   },
 
@@ -116,7 +111,7 @@ var ScrollableTabView = React.createClass({
         {this.renderTabBar({goToPage: this.goToPage,
                             tabs: this.props.children.map((child) => child.props.tabLabel),
                             activeTab: this.state.currentPage,
-                            ref: TAB_BAR_REF})}
+                            scrollValue: this.state.scrollValue})}
 
         <Animated.View style={[sceneContainerStyle, {transform: [{translateX}]}]}
           {...this._panResponder.panHandlers}>