Fix/tab controller minor issues (#758)

ethanshar · web-flow · commit 1b2dcb0ce3e2 · 2020-04-27T13:13:56.000+03:00
* meature TabBar items text to optimize loading time

* speed up tab transition

* add guesstimate center value for centerSelected feature

* add experimental optimize prop to control the new measurement behavior
diff --git a/src/components/tabController/TabBar.js b/src/components/tabController/TabBar.js
@@ -11,13 +11,26 @@ import TabBarItem from './TabBarItem';
 // import ReanimatedObject from './ReanimatedObject';
 import {asBaseComponent, forwardRef} from '../../commons';
 import View from '../../components/view';
-import {Colors, Spacings} from '../../style';
+import {Colors, Spacings, Typography} from '../../style';
 import {Constants} from '../../helpers';
 import {LogService} from '../../services';
 
+const {Code, Value, interpolate, block, set} = Reanimated;
+
 const DEFAULT_HEIGHT = 48;
 const INDICATOR_INSET = Spacings.s4;
-const {Code, Value, interpolate, block, set} = Reanimated;
+
+const DEFAULT_LABEL_STYLE = {
+  ...Typography.text80,
+  fontWeight: '400',
+  letterSpacing: 0
+};
+
+const DEFAULT_SELECTED_LABEL_STYLE = {
+  ...Typography.text80,
+  fontWeight: '700',
+  letterSpacing: 0
+};
 
 /**
  * @description: TabController's TabBar component
@@ -88,10 +101,17 @@ class TabBar extends PureComponent {
     /**
      * Pass to center selected item
      */
-    centerSelected: PropTypes.bool
+    centerSelected: PropTypes.bool,
+    /**
+     * (Experimental) Pass to optimize loading time by measuring tab bar items text 
+     * instead of waiting for onLayout
+     */
+    optimize: PropTypes.bool
   };
 
   static defaultProps = {
+    labelStyle: DEFAULT_LABEL_STYLE,
+    selectedLabelStyle: DEFAULT_SELECTED_LABEL_STYLE
     // containerWidth: Constants.screenWidth
   };
 
@@ -123,6 +143,9 @@ class TabBar extends PureComponent {
     };
 
     this.registerTabItems();
+    if (props.items && props.optimize) {
+      this.measureItems();
+    }
   }
 
   get containerWidth() {
@@ -144,7 +167,29 @@ class TabBar extends PureComponent {
 
   get centerOffset() {
     const {centerSelected} = this.props;
-    return centerSelected ? Constants.screenWidth / 2 : 0;
+    const guesstimateCenterValue = 60;
+    return centerSelected ? Constants.screenWidth / 2 - guesstimateCenterValue : 0;
+  }
+
+  measureItems = async () => {
+    const {labelStyle} = this.props;
+    const measuring = _.map(this.props.items, (item) => {
+      return Typography.measureTextSize(item.label, labelStyle);
+    });
+    const results = await Promise.all(measuring);
+    const widths = _.map(results, item => item.width + Spacings.s4 * 2);
+    const offsets = [];
+    _.forEach(widths, (width, index) => {
+      if (index === 0) {
+        offsets[index] = this.centerOffset;
+      } else {
+        offsets[index] = widths[index - 1] + offsets[index - 1];
+      }
+    });
+    this._itemsWidths = widths;
+    this._itemsOffsets = offsets;
+    // TODO: consider saving this setState and ride registerTabItems setState
+    this.setItemsLayouts();
   }
 
   registerTabItems() {
@@ -174,40 +219,42 @@ class TabBar extends PureComponent {
   }
 
   // TODO: move this logic into a ScrollPresenter or something
-  focusSelected = ([index]) => {
+  focusSelected = ([index], animated = true) => {
     const {centerSelected} = this.props;
     const itemOffset = this._itemsOffsets[index];
     const itemWidth = this._itemsWidths[index];
+    const screenCenter = Constants.screenWidth / 2;
 
     if (itemOffset && itemWidth) {
       if (centerSelected) {
-        this.tabBar.current.scrollTo({x: itemOffset - this.centerOffset + itemWidth / 2});
+        this.tabBar.current.scrollTo({x: itemOffset - screenCenter + itemWidth / 2, animated});
       } else if (itemOffset < this.tabBarScrollOffset) {
-        this.tabBar.current.scrollTo({x: itemOffset - itemWidth});
+        this.tabBar.current.scrollTo({x: itemOffset - itemWidth, animated});
       } else if (itemOffset + itemWidth > this.tabBarScrollOffset + this.containerWidth) {
         const offsetChange = Math.max(0, itemOffset - (this.tabBarScrollOffset + this.containerWidth));
-        this.tabBar.current.scrollTo({x: this.tabBarScrollOffset + offsetChange + itemWidth});
+        this.tabBar.current.scrollTo({x: this.tabBarScrollOffset + offsetChange + itemWidth, animated});
       }
     }
   };
 
+  // TODO: replace with measureItems logic
   onItemLayout = ({width, x}, itemIndex) => {
     this._itemsWidths[itemIndex] = width;
     this._itemsOffsets[itemIndex] = x;
     if (!_.includes(this._itemsWidths, null)) {
-      const {selectedIndex} = this.context;
-      const itemsOffsets = _.map(this._itemsOffsets, offset => offset + INDICATOR_INSET);
-      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});
-      }
+      this.setItemsLayouts();
     }
   };
 
+  setItemsLayouts = () => {
+    const {selectedIndex} = this.context;
+    const itemsOffsets = _.map(this._itemsOffsets, offset => offset + INDICATOR_INSET);
+    const itemsWidths = _.map(this._itemsWidths, (width) => width - INDICATOR_INSET * 2);
+
+    this.setState({itemsWidths, itemsOffsets});
+    this.focusSelected([selectedIndex], false);
+  }
+
   onScroll = ({nativeEvent: {contentOffset}}) => {
     this.tabBarScrollOffset = contentOffset.x;
   };
@@ -229,6 +276,7 @@ class TabBar extends PureComponent {
   renderTabBarItems() {
     const {itemStates} = this.context;
     const {
+      optimize,
       items,
       labelColor,
       selectedLabelColor,
@@ -257,11 +305,12 @@ class TabBar extends PureComponent {
             selectedIconColor={selectedIconColor}
             activeBackgroundColor={activeBackgroundColor}
             key={item.label}
+            width={this._itemsWidths[index]}
             {...item}
             {...this.context}
             index={index}
             state={itemStates[index]}
-            onLayout={this.onItemLayout}
+            onLayout={optimize ? undefined : this.onItemLayout}
           />
         );
       });
diff --git a/src/components/tabController/TabBarItem.js b/src/components/tabController/TabBarItem.js
@@ -15,18 +15,6 @@ const {cond, eq, call, block, event, and, defined} = Reanimated;
 const DEFAULT_LABEL_COLOR = Colors.black;
 const DEFAULT_SELECTED_LABEL_COLOR = Colors.blue30;
 
-const DEFAULT_LABEL_STYLE = {
-  ...Typography.text80,
-  fontWeight: '400',
-  letterSpacing: 0
-};
-
-const DEFAULT_SELECTED_LABEL_STYLE = {
-  ...Typography.text80,
-  fontWeight: '700',
-  letterSpacing: 0
-};
-
 /**
  * @description: TabController's TabBarItem
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.js
@@ -137,8 +125,10 @@ export default class TabBarItem extends PureComponent {
     const {index, onLayout} = this.props;
     const {itemWidth} = this.state;
     if (!itemWidth) {
-      this.setState({itemWidth: width});
-      onLayout({width, x}, index);
+      if (onLayout) {
+        this.setState({itemWidth: width});
+        onLayout({width, x}, index);
+      }
     }
   };
 
@@ -179,15 +169,15 @@ export default class TabBarItem extends PureComponent {
       ignore
     } = this.props;
 
-    const labelStyle = {...DEFAULT_LABEL_STYLE, ...this.props.labelStyle};
-    const selectedLabelStyle = {...DEFAULT_SELECTED_LABEL_STYLE, ...this.props.selectedLabelStyle};
+    const labelStyle = this.props.labelStyle;
+    const selectedLabelStyle = this.props.selectedLabelStyle;
 
     const fontWeight = cond(and(eq(targetPage, index), defined(itemWidth)),
-      selectedLabelStyle.fontWeight,
-      labelStyle.fontWeight);
+      selectedLabelStyle.fontWeight || 'normal',
+      labelStyle.fontWeight || 'normal');
     const letterSpacing = cond(and(eq(targetPage, index), defined(itemWidth)),
-      selectedLabelStyle.letterSpacing,
-      labelStyle.letterSpacing);
+      selectedLabelStyle.letterSpacing || 0,
+      labelStyle.letterSpacing || 0);
   
     const inactiveColor = labelColor || DEFAULT_LABEL_COLOR;
     const activeColor = !ignore ? selectedLabelColor || DEFAULT_SELECTED_LABEL_COLOR : inactiveColor;
diff --git a/src/components/tabController/index.js b/src/components/tabController/index.js
@@ -128,7 +128,7 @@ class TabController extends Component {
       cond(neq(currentPage, toPage), [
         set(isAnimating, 1),
         set(currentPage,
-          timing({clock, from: fromPage, to: toPage, duration: 300, easing: Easing.bezier(0.34, 1.3, 0.64, 1)}))
+          timing({clock, from: fromPage, to: toPage, duration: 280, easing: Easing.bezier(0.34, 1.3, 0.64, 1)}))
       ]),
       // Set isAnimating flag off
       cond(and(eq(isAnimating, 1), not(clockRunning(clock))), set(isAnimating, 0)),
