Infra/optimize tab controller

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

@@ -109,10 +109,11 @@ class TabControllerScreen extends Component {
           key={key}
           asCarousel={asCarousel}
           selectedIndex={selectedIndex}
-          onChangeIndex={this.onChangeIndex}
+          onChangeIndex={this.onChangeIndex}  
+          items={items}
         >
           <TabController.TabBar
-            items={items}
+            // items={items}
             // key={key}
             // uppercase
             // indicatorStyle={{backgroundColor: 'green', height: 3}}

src/components/tabController/TabBar.js

@@ -123,7 +123,7 @@ class TabBar extends PureComponent {
       LogService.warn('uilib: Please pass the "items" prop to TabController.TabBar instead of children');
     }
 
-    const itemsCount = this.itemsCount;
+    const itemsCount = this.getItemsCount();
 
     this.tabBar = React.createRef();
     this.tabBarScrollOffset = 0;
@@ -143,8 +143,11 @@ class TabBar extends PureComponent {
       itemsWidths: undefined
     };
 
-    this.registerTabItems();
-    if (props.items && props.optimize) {
+    if ((props.items || this.children) && !context.items) {
+      this.registerTabItems();
+    }
+
+    if (this.items && props.optimize) {
       this.measureItems();
     }
   }
@@ -157,21 +160,27 @@ class TabBar extends PureComponent {
     return _.filter(this.props.children, (child) => !!child);
   }
 
-  get itemsCount() {
-    const {items} = this.props;
-    if (items) {
-      return _.size(items);
-    } else {
-      return React.Children.count(this.children);
-    }
-  }
 
   get centerOffset() {
     const {centerSelected} = this.props;
     const guesstimateCenterValue = 60;
     return centerSelected ? this.containerWidth / 2 - guesstimateCenterValue : 0;
   }
 
+  get items() {
+    const {items: contextItems} = this.context;
+    const {items: propsItems} = this.props;
+    return contextItems || propsItems;
+  }
+
+  getItemsCount() {
+    if (this.items) {
+      return _.size(this.items);
+    } else {
+      return React.Children.count(this.children);
+    }
+  }
+
   getSnapBreakpoints() {
     const {centerSelected} = this.props;
     const {itemsWidths, itemsOffsets} = this.state;
@@ -187,8 +196,10 @@ class TabBar extends PureComponent {
   }
 
   measureItems = async () => {
-    const {labelStyle} = this.props;
-    const measuring = _.map(this.props.items, (item) => {
+    const {items: contextItems} = this.context;
+    const {labelStyle, items: propsItems} = this.props;
+    const items = contextItems || propsItems;
+    const measuring = _.map(items, (item) => {
       return Typography.measureTextSize(item.label, labelStyle);
     });
     const results = await Promise.all(measuring);
@@ -265,8 +276,10 @@ class TabBar extends PureComponent {
     const {selectedIndex} = this.context;
     const itemsOffsets = _.map(this._itemsOffsets, (offset) => offset + INDICATOR_INSET);
     const itemsWidths = _.map(this._itemsWidths, (width) => width - INDICATOR_INSET * 2);
+    this.contentWidth = _.sum(this._itemsWidths);
+    const scrollEnabled = this.contentWidth > this.containerWidth;
 
-    this.setState({itemsWidths, itemsOffsets});
+    this.setState({itemsWidths, itemsOffsets, scrollEnabled});
     this.focusSelected([selectedIndex], false);
   };
 
@@ -281,7 +294,7 @@ class TabBar extends PureComponent {
     } else if (this.tabBarScrollOffset <= leftThreshold && fadeLeft) {
       stateUpdate.fadeLeft = false;
     }
-    
+
     const rightThreshold = (this.contentWidth - this.containerWidth);
     if (this.tabBarScrollOffset < rightThreshold && !fadeRight) {
       stateUpdate.fadeRight = true;
@@ -294,12 +307,6 @@ class TabBar extends PureComponent {
     }
   };
 
-  onContentSizeChange = (width) => {
-    if (width > this.containerWidth && !this.contentWidth) {
-      this.contentWidth = width;
-      this.setState({scrollEnabled: true});
-    }
-  };
 
   renderSelectedIndicator() {
     const {itemsWidths} = this.state;
@@ -313,7 +320,6 @@ class TabBar extends PureComponent {
     const {itemStates} = this.context;
     const {
       optimize,
-      items,
       labelColor,
       selectedLabelColor,
       labelStyle,
@@ -328,8 +334,8 @@ class TabBar extends PureComponent {
       return;
     }
 
-    if (items) {
-      return _.map(items, (item, index) => {
+    if (this.items) {
+      return _.map(this.items, (item, index) => {
         return (
           <TabBarItem
             labelColor={labelColor}
@@ -341,7 +347,7 @@ class TabBar extends PureComponent {
             selectedIconColor={selectedIconColor}
             activeBackgroundColor={activeBackgroundColor}
             key={item.label}
-            width={this._itemsWidths[index]}
+            // width={this._itemsWidths[index]}
             {...item}
             {...this.context}
             index={index}
@@ -409,7 +415,6 @@ class TabBar extends PureComponent {
           style={styles.tabBarScroll}
           contentContainerStyle={{minWidth: this.containerWidth}}
           scrollEnabled={scrollEnabled}
-          onContentSizeChange={this.onContentSizeChange}
           onScroll={this.onScroll}
           scrollEventThrottle={16}
           testID={testID}

src/components/tabController/TabBarItem.js

@@ -10,7 +10,7 @@ import {Colors, Typography, Spacings} from '../../style';
 import Badge from '../../components/badge';
 import {TouchableOpacity} from '../../incubator';
 
-const {cond, eq, call, block, event, and, defined} = Reanimated;
+const {cond, eq, call, block, event, and} = Reanimated;
 
 const DEFAULT_LABEL_COLOR = Colors.black;
 const DEFAULT_SELECTED_LABEL_COLOR = Colors.blue30;
@@ -106,9 +106,9 @@ export default class TabBarItem extends PureComponent {
     onPress: _.noop
   };
 
-  state = {
-    itemWidth: undefined
-  };
+  state = {};
+  itemWidth = this.props.width;
+  itemRef = React.createRef();
 
   onStateChange = event([
     {
@@ -123,10 +123,10 @@ export default class TabBarItem extends PureComponent {
     }
   }) => {
     const {index, onLayout} = this.props;
-    const {itemWidth} = this.state;
-    if (!itemWidth) {
+    if (!this.itemWidth) {
+      this.itemWidth = width;
+      this.itemRef.current.setNativeProps({style: {width, paddingHorizontal: null, flex: null}});
       if (onLayout) {
-        this.setState({itemWidth: width});
         onLayout({width, x}, index);
       }
     }
@@ -138,8 +138,7 @@ export default class TabBarItem extends PureComponent {
   };
 
   getItemStyle() {
-    const {state, width} = this.props;
-    const {itemWidth} = this.state;
+    const {state} = this.props;
     const opacity = block([
       cond(eq(state, State.END), call([], this.onPress)),
       cond(eq(state, State.BEGAN), this.props.activeOpacity, 1)
@@ -149,44 +148,36 @@ export default class TabBarItem extends PureComponent {
       opacity
     };
 
-    if (width || itemWidth) {
-      style.flex = undefined;
-      style.width = width || itemWidth;
-      style.paddingHorizontal = undefined;
-    }
+    // if (this.itemWidth) {
+    //   style.flex = undefined;
+    //   style.width = this.itemWidth;
+    //   style.paddingHorizontal = undefined;
+    // }
 
     return style;
   }
 
   getLabelStyle() {
-    const {itemWidth} = this.state;
-    const {
-      index,
-      currentPage,
-      targetPage,
-      labelColor,
-      selectedLabelColor,
-      ignore
-    } = this.props;
+    const {index, currentPage, targetPage, labelColor, selectedLabelColor, ignore} = this.props;
 
     const labelStyle = this.props.labelStyle;
     const selectedLabelStyle = this.props.selectedLabelStyle;
     let fontWeight, letterSpacing, fontFamily;
 
     if (labelStyle.fontWeight || selectedLabelStyle.fontWeight) {
-      fontWeight = cond(and(eq(targetPage, index), defined(itemWidth)),
+      fontWeight = cond(and(eq(targetPage, index) /* , defined(itemWidth) */),
         selectedLabelStyle.fontWeight || 'normal',
         labelStyle.fontWeight || 'normal');
     }
 
     if (labelStyle.letterSpacing || selectedLabelStyle.letterSpacing) {
-      letterSpacing = cond(and(eq(targetPage, index), defined(itemWidth)),
+      letterSpacing = cond(and(eq(targetPage, index) /* , defined(itemWidth) */),
         selectedLabelStyle.letterSpacing || 0,
         labelStyle.letterSpacing || 0);
     }
 
     if (labelStyle.fontFamily || selectedLabelStyle.fontFamily) {
-      fontFamily = cond(and(eq(targetPage, index), defined(itemWidth)),
+      fontFamily = cond(and(eq(targetPage, index) /* , defined(itemWidth) */),
         selectedLabelStyle.fontFamily,
         labelStyle.fontFamily);
     }
@@ -207,7 +198,8 @@ export default class TabBarItem extends PureComponent {
         fontWeight,
         letterSpacing,
         color
-      }, _.isUndefined)
+      },
+      _.isUndefined)
     ];
   }
 
@@ -233,6 +225,7 @@ export default class TabBarItem extends PureComponent {
 
     return (
       <TouchableOpacity
+        ref={this.itemRef}
         pressState={state}
         style={[styles.tabItem, this.getItemStyle()]}
         onLayout={this.onLayout}

src/components/tabController/index.js

@@ -74,17 +74,28 @@ class TabController extends Component {
   constructor(props) {
     super(props);
 
+    let itemStates = [];
+    let ignoredItems = [];
+    if (props.items) {
+      const itemsCount = _.chain(props.items).filter(item => !item.ignore).size().value();
+      itemStates = _.times(itemsCount, () => new Value(State.UNDETERMINED));
+      ignoredItems = _.filter(props.items, item => item.ignore);
+    }
+
     this.state = {
       selectedIndex: this.props.selectedIndex,
       asCarousel: this.props.asCarousel,
-      itemStates: [],
       pageWidth: this.pageWidth,
+      // items
+      items: props.items,
+      itemStates,
+      ignoredItems,
       // animated values
       targetPage: new Value(this.props.selectedIndex),
       currentPage: new Value(this.props.selectedIndex),
       carouselOffset: new Value(this.props.selectedIndex * Math.round(this.pageWidth)),
       containerWidth: new Value(this.pageWidth),
-      // // callbacks
+      // callbacks
       registerTabItems: this.registerTabItems,
       onChangeIndex: this.props.onChangeIndex
     };

src/incubator/TouchableOpacity.tsx

@@ -139,11 +139,11 @@ class TouchableOpacity extends PureComponent<TouchableOpacityPropTypes & BaseCom
       <TapGestureHandler
         onHandlerStateChange={this.onStateChange}
         shouldCancelWhenOutside
-        ref={forwardedRef}
         enabled={!disabled}
       >
         <Reanimated.View
           {...others}
+          ref={forwardedRef}
           style={[
             borderRadius && {borderRadius},
             flexStyle,