Fix transition issues in TabController

ethanshar · ethanshar · commit c6ef5fcd4e3b · 2020-02-08T19:07:21.000+02:00
diff --git a/demo/src/screens/incubatorScreens/TabControllerScreen/index.js b/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>
     );
   }
diff --git a/src/incubator/TabController/PageCarousel.js b/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>
       </>
     );
   }
diff --git a/src/incubator/TabController/TabBar.js b/src/incubator/TabController/TabBar.js
@@ -115,9 +115,6 @@ 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);
 
@@ -178,7 +175,6 @@ class TabBar extends PureComponent {
   }
 
   onItemLayout = (itemWidth, itemIndex) => {
-    const {asCarousel} = this.context;
     this._itemsWidths[itemIndex] = itemWidth;
     if (!_.includes(this._itemsWidths, null)) {
       const {selectedIndex} = this.context;
@@ -188,14 +184,6 @@ class TabBar extends PureComponent {
 
       this.setState({itemsWidths, itemsOffsets});
       this.tabBar.current.scrollTo({x: itemsOffsets[selectedIndex], animated: false});
-
-      if (!asCarousel) {
-        this._indicatorOffset = runIndicatorTimer(new Clock(), this.context.currentPage, itemsOffsets);
-        this._indicatorWidth = runIndicatorTimer(new Clock(), this.context.currentPage, itemsWidths);
-
-        this._indicatorTransitionStyle.left = this._indicatorOffset;
-        this._indicatorTransitionStyle.width = this._indicatorWidth;
-      }
     }
   };
 
@@ -275,10 +263,35 @@ class TabBar extends PureComponent {
     }
   }
 
-  render() {
+  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 {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]}
@@ -295,26 +308,7 @@ class TabBar extends PureComponent {
           <View style={[styles.tabBar, height && {height}]}>{this.renderTabBarItems()}</View>
           {this.renderSelectedIndicator()}
         </ScrollView>
-        <Code>
-          {() => {
-            if (asCarousel && _.size(itemsWidths) > 1) {
-              return block([
-                set(this._indicatorOffset,
-                  Reanimated.interpolate(carouselOffset, {
-                    inputRange: itemsOffsets.map((offset, index) => index * Constants.screenWidth),
-                    outputRange: itemsOffsets
-                  })),
-                set(this._indicatorWidth,
-                  Reanimated.interpolate(carouselOffset, {
-                    inputRange: itemsWidths.map((width, index) => index * Constants.screenWidth),
-                    outputRange: itemsWidths
-                  }))
-              ]);
-            }
-
-            return block([]);
-          }}
-        </Code>
+        {_.size(itemsWidths) > 1 && <Code>{this.renderCodeBlock}</Code>}
       </View>
     );
   }
diff --git a/src/incubator/TabController/TabPage.js b/src/incubator/TabController/TabPage.js
@@ -63,27 +63,27 @@ export default class TabPage extends PureComponent {
     }, this.props.lazyLoadTime); // tab bar indicator transition time
   };
 
-  render() {
+  renderCodeBlock = () => {
     const {currentPage} = this.context;
-    const {index, lazy, renderLoading, testID} = this.props;
+    const {index, lazy} = this.props;
+    return block([
+      cond(and(eq(currentPage, index), lazy, eq(this._loaded, 0)), [set(this._loaded, 1), call([], this.lazyLoad)]),
+      cond(eq(currentPage, index),
+        [set(this._opacity, 1), set(this._zIndex, 1)],
+        [set(this._opacity, 0), set(this._zIndex, 0)])
+    ]);
+  };
+
+  render() {
+    const {renderLoading, testID} = this.props;
     const {loaded} = this.state;
 
     return (
       <Reanimated.View style={this._pageStyle} testID={testID}>
         {!loaded && renderLoading()}
         {loaded && this.props.children}
         <Code>
-          {() => {
-            return block([
-              cond(and(eq(currentPage, index), lazy, eq(this._loaded, 0)), [
-                set(this._loaded, 1),
-                call([], this.lazyLoad)
-              ]),
-              cond(eq(currentPage, index),
-                [set(this._opacity, 1), set(this._zIndex, 1)],
-                [set(this._opacity, 0), set(this._zIndex, 0)])
-            ]);
-          }}
+          {this.renderCodeBlock}
         </Code>
       </Reanimated.View>
     );
diff --git a/src/incubator/TabController/index.js b/src/incubator/TabController/index.js
@@ -52,6 +52,7 @@ class TabController extends Component {
   };
 
   state = {
+    selectedIndex: this.props.selectedIndex,
     itemStates: []
   };
 
@@ -60,8 +61,8 @@ class TabController extends Component {
   _carouselOffset = new Value(this.props.selectedIndex * Math.round(Constants.screenWidth));
 
   getProviderContextValue = () => {
-    const {itemStates} = this.state;
-    const {onChangeIndex, selectedIndex, asCarousel} = this.props;
+    const {itemStates, selectedIndex} = this.state;
+    const {onChangeIndex, asCarousel} = this.props;
     return {
       selectedIndex,
       currentPage: this._currentPage,
@@ -80,7 +81,7 @@ class TabController extends Component {
 
   onPageChange = ([index]) => {
     _.invoke(this.props, 'onChangeIndex', index);
-  }
+  };
 
   getCarouselPageChangeCode() {
     const {asCarousel} = this.props;
@@ -100,33 +101,32 @@ class TabController extends Component {
     return [];
   }
 
-  render() {
+  renderCodeBlock = () => {
     const {itemStates, ignoredItems} = this.state;
+    return block([
+      // Carousel Page change
+      ...this.getCarouselPageChangeCode(),
+      // TabBar Page change
+      ..._.map(itemStates, (state, index) => {
+        return [
+          cond(and(eq(state, State.BEGAN), !_.includes(ignoredItems, index)), set(this._targetPage, index)),
+          cond(and(eq(this._targetPage, index), eq(state, State.END), !_.includes(ignoredItems, index)), [
+            set(this._currentPage, index),
+            set(this._targetPage, -1)
+          ])
+        ];
+      }),
+      onChange(this._currentPage, call([this._currentPage], this.onPageChange))
+    ]);
+  };
+
+  render() {
+    const {itemStates} = this.state;
 
     return (
       <TabBarContext.Provider value={this.getProviderContextValue()}>
         {this.props.children}
-        {!_.isEmpty(itemStates) && (
-          <Code>
-            {() =>
-              block([
-                // Carousel Page change
-                ...this.getCarouselPageChangeCode(),
-                // TabBar Page change
-                ..._.map(itemStates, (state, index) => {
-                  return [
-                    cond(and(eq(state, State.BEGAN), !_.includes(ignoredItems, index)), set(this._targetPage, index)),
-                    cond(and(eq(this._targetPage, index), eq(state, State.END), !_.includes(ignoredItems, index)), [
-                      set(this._currentPage, index),
-                      set(this._targetPage, -1)
-                    ])
-                  ];
-                }),
-                onChange(this._currentPage, call([this._currentPage], this.onPageChange))
-              ])
-            }
-          </Code>
-        )}
+        {!_.isEmpty(itemStates) && <Code>{this.renderCodeBlock}</Code>}
       </TabBarContext.Provider>
     );
   }
