hotfix for transition issues in TabController in reanimated >= v1.5.0

Author: ethanshar

demo/src/screens/incubatorScreens/TabControllerScreen/index.js

@@ -7,11 +7,11 @@ import Tab1 from './tab1';
 import Tab2 from './tab2';
 import Tab3 from './tab3';
 
-const USE_CAROUSEL = true;
 const TABS = ['Home', 'Me', 'Dashboard', 'account', 'groups', 'blog'];
 
 class TabControllerScreen extends Component {
   state = {
+    asCarousel: true,
     selectedIndex: 0,
     items: [
       ..._.map(TABS, tab => ({label: tab, key: tab})),
@@ -72,6 +72,17 @@ class TabControllerScreen extends Component {
   //   ];
   // }
 
+  toggleCarouselMode = () => {
+    this.setState({
+      asCarousel: !this.state.asCarousel,
+      key: this.state.asCarousel ? 'asCarousel' : 'staticPages'
+    });
+  };
+
+  onChangeIndex = selectedIndex => {
+    this.setState({selectedIndex});
+  };
+
   renderLoadingPage() {
     return (
       <View flex center>
@@ -84,8 +95,9 @@ class TabControllerScreen extends Component {
   }
 
   renderTabPages() {
-    const Container = USE_CAROUSEL ? Incubator.TabController.PageCarousel : View;
-    const containerProps = USE_CAROUSEL ? {} : {flex: true};
+    const {asCarousel} = this.state;
+    const Container = asCarousel ? Incubator.TabController.PageCarousel : View;
+    const containerProps = asCarousel ? {} : {flex: true};
     return (
       <Container {...containerProps}>
         <Incubator.TabController.TabPage index={0}>
@@ -111,33 +123,38 @@ class TabControllerScreen extends Component {
   }
 
   render() {
-    const {key, selectedIndex} = this.state;
+    const {key, selectedIndex, asCarousel} = this.state;
     return (
-      <View flex bg-dark80>
-        <View flex>
-          <Incubator.TabController
-            key={key}
-            asCarousel={USE_CAROUSEL}
-            selectedIndex={selectedIndex}
-            onChangeIndex={index => console.warn('tab index is', index)}
+      <View flex bg-grey70>
+        <Incubator.TabController
+          key={key}
+          asCarousel={asCarousel}
+          selectedIndex={selectedIndex}
+          onChangeIndex={this.onChangeIndex}
+        >
+          <Incubator.TabController.TabBar
+            items={this.getItems()}
+            // key={key}
+            // uppercase
+            // indicatorStyle={{backgroundColor: 'green', height: 3}}
+            // labelColor={'green'}
+            // selectedLabelColor={'red'}
+            // labelStyle={{fontSize: 20}}
+            // iconColor={'green'}
+            // selectedIconColor={'blue'}
+            activeBackgroundColor={Colors.blue60}
           >
-            <Incubator.TabController.TabBar
-              items={this.getItems()}
-              // key={key}
-              // uppercase
-              // indicatorStyle={{backgroundColor: 'green', height: 3}}
-              // labelColor={'green'}
-              // selectedLabelColor={'red'}
-              // labelStyle={{fontSize: 20}}
-              // iconColor={'green'}
-              // selectedIconColor={'blue'}
-              activeBackgroundColor={Colors.blue60}
-            >
-              {/* {this.renderTabItems()} */}
-            </Incubator.TabController.TabBar>
-            {this.renderTabPages()}
-          </Incubator.TabController>
-        </View>
+            {/* {this.renderTabItems()} */}
+          </Incubator.TabController.TabBar>
+          {this.renderTabPages()}
+        </Incubator.TabController>
+        <Button
+          bg-grey20={!asCarousel}
+          bg-green30={asCarousel}
+          label={`Carousel:${asCarousel ? 'ON' : 'OFF'}`}
+          style={{position: 'absolute', bottom: 100, right: 20}}
+          onPress={this.toggleCarouselMode}
+        />
       </View>
     );
   }

src/incubator/TabController/PageCarousel.js

@@ -1,11 +1,11 @@
-import React, {Component} from 'react';
+import React, {PureComponent} from 'react';
 import TabBarContext from './TabBarContext';
 import Animated from 'react-native-reanimated';
 import {Constants} from '../../helpers';
 
 const {Code, block, call} = Animated;
 
-class PageCarousel extends Component {
+class PageCarousel extends PureComponent {
   static contextType = TabBarContext;
   carousel = React.createRef();
 
@@ -28,10 +28,15 @@ class PageCarousel extends Component {
   scrollToPage = (pageIndex, animated) => {
     const node = this.carousel.current.getNode();
     node.scrollTo({x: pageIndex * Constants.screenWidth, animated});
-  }
+  };
+
+  renderCodeBlock = () => {
+    const {currentPage} = this.context;
+    return block([Animated.onChange(currentPage, call([currentPage], this.onTabChange))]);
+  };
 
   render() {
-    const {selectedIndex, currentPage} = this.context;
+    const {selectedIndex} = this.context;
     return (
       <>
         <Animated.ScrollView
@@ -45,13 +50,7 @@ class PageCarousel extends Component {
           contentOffset={{x: selectedIndex * Constants.screenWidth}} // iOS only
         />
 
-        <Code>
-          {() => {
-            return block([
-              Animated.onChange(currentPage, call([currentPage], this.onTabChange))
-            ]);
-          }}
-        </Code>
+        <Code>{this.renderCodeBlock}</Code>
       </>
     );
   }

src/incubator/TabController/TabBar.js

@@ -8,7 +8,7 @@ import _ from 'lodash';
 
 import TabBarContext from './TabBarContext';
 import TabBarItem from './TabBarItem';
-import ReanimatedObject from './ReanimatedObject';
+// import ReanimatedObject from './ReanimatedObject';
 import {asBaseComponent, forwardRef} from '../../commons';
 import View from '../../components/view';
 import Text from '../../components/text';
@@ -17,7 +17,23 @@ import {Constants} from '../../helpers';
 import {LogService} from '../../services';
 
 const DEFAULT_HEIGHT = 48;
-const {Code, Clock, Value, add, sub, cond, eq, stopClock, startClock, clockRunning, timing, block, set} = Reanimated;
+const INDICATOR_INSET = Spacings.s4;
+const {
+  Code,
+  Clock,
+  Value,
+  and,
+  eq,
+  neq,
+  cond,
+  stopClock,
+  startClock,
+  interpolate,
+  Extrapolate,
+  timing,
+  block,
+  set
+} = Reanimated;
 
 /**
  * @description: TabController's TabBar component
@@ -99,11 +115,12 @@ class TabBar extends PureComponent {
     this.tabBar = React.createRef();
 
     this._itemsWidths = _.times(itemsCount, () => null);
-    this._indicatorOffset = new ReanimatedObject({duration: 300, easing: Easing.bezier(0.23, 1, 0.32, 1)});
-    this._indicatorWidth = new ReanimatedObject({duration: 300, easing: Easing.bezier(0.23, 1, 0.32, 1)});
+    this._indicatorOffset = new Value(0);
+    this._indicatorWidth = new Value(0);
+
     this._indicatorTransitionStyle = {
-      width: this._indicatorWidth.value,
-      left: this._indicatorOffset.value
+      width: this._indicatorWidth,
+      left: this._indicatorOffset
     };
 
     this.state = {
@@ -161,9 +178,16 @@ class TabBar extends PureComponent {
     this._itemsWidths[itemIndex] = itemWidth;
     if (!_.includes(this._itemsWidths, null)) {
       const {selectedIndex} = this.context;
-      const itemsOffsets = _.map(this._itemsWidths, (w, index) => _.sum(_.take(this._itemsWidths, index)));
-      this.setState({itemsWidths: this._itemsWidths, itemsOffsets});
-      this.tabBar.current.scrollTo({x: itemsOffsets[selectedIndex], animated: false});
+      const itemsOffsets = _.map(this._itemsWidths,
+        (w, index) => INDICATOR_INSET + _.sum(_.take(this._itemsWidths, index)));
+      const itemsWidths = _.map(this._itemsWidths, width => width - INDICATOR_INSET * 2);
+
+      this.setState({itemsWidths, itemsOffsets});
+      const selectedItemOffset = itemsOffsets[selectedIndex] - INDICATOR_INSET;
+      
+      if (selectedItemOffset + this._itemsWidths[selectedIndex] > Constants.screenWidth) {  
+        this.tabBar.current.scrollTo({x: selectedItemOffset, animated: true});
+      }
     }
   };
 
@@ -173,35 +197,6 @@ class TabBar extends PureComponent {
     }
   };
 
-  runTiming(targetValue, prevValue, duration) {
-    const clock = new Clock();
-    const state = {
-      finished: new Value(0),
-      position: prevValue,
-      time: new Value(0),
-      frameTime: new Value(0)
-    };
-
-    const config = {
-      duration,
-      toValue: targetValue,
-      easing: Easing.bezier(0.23, 1, 0.32, 1)
-    };
-
-    return block([
-      cond(clockRunning(clock), [], [startClock(clock)]),
-      timing(clock, state, config),
-      cond(state.finished, [
-        stopClock(clock),
-        set(state.finished, 0),
-        set(state.time, 0),
-        set(state.frameTime, 0),
-        set(prevValue, state.position)
-      ]),
-      state.position
-    ]);
-  }
-
   renderSelectedIndicator() {
     const {itemsWidths} = this.state;
     const {indicatorStyle} = this.props;
@@ -248,7 +243,6 @@ class TabBar extends PureComponent {
       });
     } else {
       // TODO: Remove once props.children is deprecated
-
       if (this.tabBarItems) {
         return this.tabBarItems;
       }
@@ -273,10 +267,35 @@ class TabBar extends PureComponent {
     }
   }
 
+  renderCodeBlock = () => {
+    const {carouselOffset, asCarousel} = this.context;
+    const {itemsWidths, itemsOffsets} = this.state;
+    const nodes = [];
+
+    if (asCarousel) {
+      nodes.push(set(this._indicatorOffset,
+        interpolate(carouselOffset, {
+          inputRange: itemsOffsets.map((value, index) => index * Constants.screenWidth),
+          outputRange: itemsOffsets,
+          extrapolate: Extrapolate.CLAMP
+        })),
+      set(this._indicatorWidth,
+        interpolate(carouselOffset, {
+          inputRange: itemsWidths.map((value, index) => index * Constants.screenWidth),
+          outputRange: itemsWidths,
+          extrapolate: Extrapolate.CLAMP
+        })));
+    } else {
+      nodes.push(set(this._indicatorOffset, runIndicatorTimer(new Clock(), this.context.currentPage, itemsOffsets)),
+        set(this._indicatorWidth, runIndicatorTimer(new Clock(), this.context.currentPage, itemsWidths)));
+    }
+
+    return block(nodes);
+  };
+
   render() {
-    const {currentPage, carouselOffset, asCarousel} = this.context;
     const {height, enableShadow, containerStyle} = this.props;
-    const {itemsWidths, itemsOffsets, scrollEnabled} = this.state;
+    const {itemsWidths, scrollEnabled} = this.state;
     return (
       <View
         style={[styles.container, enableShadow && styles.containerShadow, {width: this.containerWidth}, containerStyle]}
@@ -293,48 +312,7 @@ class TabBar extends PureComponent {
           <View style={[styles.tabBar, height && {height}]}>{this.renderTabBarItems()}</View>
           {this.renderSelectedIndicator()}
         </ScrollView>
-        {!_.isUndefined(itemsWidths) && (
-          <Code>
-            {() => {
-              const indicatorInset = Spacings.s4;
-
-              return block(asCarousel && _.size(itemsWidths) > 1
-                /* Transition for carousel pages */
-                ? [
-                  set(this._indicatorOffset.value,
-                    Reanimated.interpolate(carouselOffset, {
-                      inputRange: itemsOffsets.map((offset, index) => index * Constants.screenWidth),
-                      outputRange: itemsOffsets.map(offset => offset + indicatorInset)
-                    })),
-                  set(this._indicatorWidth.value,
-                    Reanimated.interpolate(carouselOffset, {
-                      inputRange: itemsWidths.map((width, index) => index * Constants.screenWidth),
-                      outputRange: itemsWidths.map((width, index) => width - 2 * indicatorInset)
-                    }))
-                ]
-                /* Default transition */
-                : [
-                  // calc indicator current width
-                  ..._.map(itemsWidths, (width, index) => {
-                    return cond(eq(currentPage, index), [
-                      set(this._indicatorWidth.nextValue, sub(itemsWidths[index], indicatorInset * 2))
-                    ]);
-                  }),
-                  // calc indicator current position
-                  ..._.map(itemsOffsets, (offset, index) => {
-                    return cond(eq(currentPage, index), [
-                      set(this._indicatorOffset.nextValue, add(itemsOffsets[index], indicatorInset))
-                    ]);
-                  }),
-
-                  // Offset transition
-                  this._indicatorOffset.getTransitionBlock(),
-                  // Width transition
-                  this._indicatorWidth.getTransitionBlock()
-                ]);
-            }}
-          </Code>
-        )}
+        {_.size(itemsWidths) > 1 && <Code>{this.renderCodeBlock}</Code>}
       </View>
     );
   }
@@ -386,4 +364,38 @@ const styles = StyleSheet.create({
   }
 });
 
+function runIndicatorTimer(clock, currentPage, values) {
+  const state = {
+    finished: new Value(0),
+    position: new Value(0),
+    time: new Value(0),
+    frameTime: new Value(0)
+  };
+
+  const config = {
+    duration: 300,
+    toValue: new Value(100),
+    easing: Easing.inOut(Easing.ease)
+  };
+
+  return block([
+    ..._.map(values, (value, index) => {
+      return cond(and(eq(currentPage, index), neq(config.toValue, index)), [
+        set(state.finished, 0),
+        set(state.time, 0),
+        set(state.frameTime, 0),
+        set(config.toValue, index),
+        startClock(clock)
+      ]);
+    }),
+    timing(clock, state, config),
+    cond(state.finished, stopClock(clock)),
+    interpolate(state.position, {
+      inputRange: _.times(values.length),
+      outputRange: values,
+      extrapolate: Extrapolate.CLAMP
+    })
+  ]);
+}
+
 export default asBaseComponent(forwardRef(TabBar));