Use native animations for DefaultTabBar

Author: janicduplessis

DefaultTabBar.js

@@ -65,8 +65,9 @@ const DefaultTabBar = React.createClass({
       bottom: 0,
     };
 
-    const left = this.props.scrollValue.interpolate({
-      inputRange: [0, 1, ], outputRange: [0,  containerWidth / numberOfTabs, ],
+    const translateX = this.props.scrollValue.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0,  containerWidth / numberOfTabs],
     });
     return (
       <View style={[styles.tabs, {backgroundColor: this.props.backgroundColor, }, this.props.style, ]}>
@@ -75,7 +76,17 @@ const DefaultTabBar = React.createClass({
           const renderTab = this.props.renderTab || this.renderTab;
           return renderTab(name, page, isTabActive, this.props.goToPage);
         })}
-        <Animated.View style={[tabUnderlineStyle, { left, }, this.props.underlineStyle, ]} />
+        <Animated.View
+          style={[
+            tabUnderlineStyle,
+            {
+              transform: [
+                { translateX },
+              ]
+            },
+            this.props.underlineStyle,
+          ]}
+        />
       </View>
     );
   },

index.js

@@ -20,6 +20,9 @@ const SceneComponent = require('./SceneComponent');
 const DefaultTabBar = require('./DefaultTabBar');
 const ScrollableTabBar = require('./ScrollableTabBar');
 
+const AnimatedViewPagerAndroid = Platform.OS === 'android' ?
+  Animated.createAnimatedComponent(ViewPagerAndroid) :
+  undefined;
 
 const ScrollableTabView = React.createClass({
   mixins: [TimerMixin, ],
@@ -58,10 +61,49 @@ const ScrollableTabView = React.createClass({
   },
 
   getInitialState() {
+    const containerWidth = Dimensions.get('window').width;
+    let scrollValue;
+    let scrollXIOS;
+    let positionAndroid;
+    let offsetAndroid;
+
+    if (Platform.OS === 'ios') {
+      scrollXIOS = new Animated.Value(this.props.initialPage * containerWidth);
+      const containerWidthAnimatedValue = new Animated.Value(containerWidth);
+      // Need to call __makeNative manually to avoid a native animated bug. See
+      // https://github.com/facebook/react-native/pull/14435
+      containerWidthAnimatedValue.__makeNative();
+      scrollValue = Animated.divide(scrollXIOS, containerWidthAnimatedValue);
+
+      const callListeners = this._polyfillAnimatedValue(scrollValue);
+      scrollXIOS.addListener(
+        ({ value, }) => callListeners(value / this.state.containerWidth)
+      );
+    } else {
+      positionAndroid = new Animated.Value(this.props.initialPage);
+      offsetAndroid = new Animated.Value(0);
+      scrollValue = Animated.add(positionAndroid, offsetAndroid);
+
+      const callListeners = this._polyfillAnimatedValue(scrollValue);
+      let positionAndroidValue = this.props.initialPage;
+      let offsetAndroidValue = 0;
+      positionAndroid.addListener(({ value, }) => {
+        positionAndroidValue = value;
+        callListeners(positionAndroidValue + offsetAndroidValue);
+      });
+      offsetAndroid.addListener(({ value, }) => {
+        offsetAndroidValue = value;
+        callListeners(positionAndroidValue + offsetAndroidValue);
+      });
+    }
+
     return {
       currentPage: this.props.initialPage,
-      scrollValue: new Animated.Value(this.props.initialPage),
-      containerWidth: Dimensions.get('window').width,
+      scrollValue,
+      scrollXIOS,
+      positionAndroid,
+      offsetAndroid,
+      containerWidth,
       sceneKeys: this.newSceneKeys({ currentPage: this.props.initialPage, }),
     };
   },
@@ -76,18 +118,27 @@ const ScrollableTabView = React.createClass({
     }
   },
 
+  componentWillUnmount() {
+    if (Platform.OS === 'ios') {
+      this.state.scrollXIOS.removeAllListeners();
+    } else {
+      this.state.positionAndroid.removeAllListeners();
+      this.state.offsetAndroid.removeAllListeners();
+    }
+  },
+
   goToPage(pageNumber) {
     if (Platform.OS === 'ios') {
       const offset = pageNumber * this.state.containerWidth;
       if (this.scrollView) {
-        this.scrollView.scrollTo({x: offset, y: 0, animated: !this.props.scrollWithoutAnimation, });
+        this.scrollView.getNode().scrollTo({x: offset, y: 0, animated: !this.props.scrollWithoutAnimation, });
       }
     } else {
       if (this.scrollView) {
         if (this.props.scrollWithoutAnimation) {
-          this.scrollView.setPageWithoutAnimation(pageNumber);
+          this.scrollView.getNode().setPageWithoutAnimation(pageNumber);
         } else {
-          this.scrollView.setPage(pageNumber);
+          this.scrollView.getNode().setPage(pageNumber);
         }
       }
     }
@@ -126,6 +177,31 @@ const ScrollableTabView = React.createClass({
     return newKeys;
   },
 
+  // Animated.add and Animated.divide do not currently support listeners so
+  // we have to polyfill it here since a lot of code depends on being able
+  // to add a listener to `scrollValue`. See https://github.com/facebook/react-native/pull/12620.
+  _polyfillAnimatedValue(animatedValue) {
+
+    const listeners = new Set();
+    const addListener = (listener) => {
+      listeners.add(listener);
+    };
+
+    const removeListener = (listener) => {
+      listeners.delete(listener);
+    };
+
+    const removeAllListeners = () => {
+      listeners.clear();
+    };
+
+    animatedValue.addListener = addListener;
+    animatedValue.removeListener = removeListener;
+    animatedValue.removeAllListeners = removeAllListeners;
+
+    return (value) => listeners.forEach(listener => listener({ value, }));
+  },
+
   _shouldRenderSceneKey(idx, currentPageKey) {
     let numOfSibling = this.props.prerenderingSiblingsNumber;
     return (idx < (currentPageKey + numOfSibling + 1) &&
@@ -143,20 +219,16 @@ const ScrollableTabView = React.createClass({
   renderScrollableContent() {
     if (Platform.OS === 'ios') {
       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;
-          if (offsetX === 0 && !this.scrollOnMountCalled) {
-            this.scrollOnMountCalled = true;
-          } else {
-            this._updateScrollValue(offsetX / this.state.containerWidth);
-          }
-        }}
+        onScroll={Animated.event(
+          [{ nativeEvent: { contentOffset: { x: this.state.scrollXIOS, }, }, }, ],
+          { useNativeDriver: true, listener: this._onScroll, }
+        )}
         onMomentumScrollBegin={this._onMomentumScrollBeginAndEnd}
         onMomentumScrollEnd={this._onMomentumScrollBeginAndEnd}
         scrollEventThrottle={16}
@@ -169,25 +241,33 @@ const ScrollableTabView = React.createClass({
         {...this.props.contentProps}
       >
           {scenes}
-      </ScrollView>;
+      </Animated.ScrollView>;
     } else {
       const scenes = this._composeScenes();
-      return <ViewPagerAndroid
+      return <AnimatedViewPagerAndroid
         key={this._children().length}
         style={styles.scrollableContentAndroid}
         initialPage={this.props.initialPage}
         onPageSelected={this._updateSelectedPage}
         keyboardDismissMode="on-drag"
         scrollEnabled={!this.props.locked}
-        onPageScroll={(e) => {
-          const { offset, position, } = e.nativeEvent;
-          this._updateScrollValue(position + offset);
-        }}
+        onPageScroll={Animated.event(
+          [{
+            nativeEvent: {
+              position: this.state.positionAndroid,
+              offset: this.state.offsetAndroid,
+            },
+          }, ],
+          {
+            useNativeDriver: true,
+            listener: this._onScroll,
+          },
+        )}
         ref={(scrollView) => { this.scrollView = scrollView; }}
         {...this.props.contentProps}
       >
         {scenes}
-      </ViewPagerAndroid>;
+      </AnimatedViewPagerAndroid>;
     }
   },
 
@@ -233,16 +313,34 @@ const ScrollableTabView = React.createClass({
     });
   },
 
-  _updateScrollValue(value) {
-    this.state.scrollValue.setValue(value);
-    this.props.onScroll(value);
+  _onScroll(e) {
+    if (Platform.OS === 'ios') {
+      const offsetX = e.nativeEvent.contentOffset.x;
+      if (offsetX === 0 && !this.scrollOnMountCalled) {
+        this.scrollOnMountCalled = true;
+      } else {
+        this.props.onScroll(offsetX / this.state.containerWidth);
+      }
+    } else {
+      const { position, offset, } = e.nativeEvent;
+      this.props.onScroll(position + offset);
+    }
   },
 
   _handleLayout(e) {
     const { width, } = e.nativeEvent.layout;
 
     if (Math.round(width) !== Math.round(this.state.containerWidth)) {
-      this.setState({ containerWidth: width, });
+      if (Platform.OS === 'ios') {
+        const containerWidthAnimatedValue = new Animated.Value(width);
+        // Need to call __makeNative manually to avoid a native animated bug. See
+        // https://github.com/facebook/react-native/pull/14435
+        containerWidthAnimatedValue.__makeNative();
+        scrollValue = Animated.divide(this.state.scrollXIOS, containerWidthAnimatedValue);
+        this.setState({ containerWidth: width, scrollValue, });
+      } else {
+        this.setState({ containerWidth: width, });
+      }
       this.requestAnimationFrame(() => {
         this.goToPage(this.state.currentPage);
       });