@shoutem/ui 8.2.0 → 8.2.1

package/components/TabMenu/TabMenu.js

@@ -11,70 +11,76 @@ class TabMenu extends PureComponent {
   constructor(props) {
     super(props);
 
+    this.scroll = {};
+
     autoBindReact(this);
 
     this.state = {
       itemWidths: {},
-      scrollOffset: 0,
+      viewportHorizontal: [],
     };
   }
 
-  handleOptionSelected(key, option) {
-    const { onOptionSelected } = this.props;
-    const { scrollOffset, itemWidths, viewportHorizontal } = this.state;
+  componentDidMount() {
+    this.scrollToSelectedItem();
+  }
+
+  componentDidUpdate(prevProps) {
+    const { selectedOption } = this.props;
+
+    if (prevProps.selectedOption !== selectedOption) {
+      this.scrollToSelectedItem();
+    }
+  }
+
+  scrollToSelectedItem() {
+    const { selectedOption, options } = this.props;
+    const { itemWidths, viewportHorizontal } = this.state;
+
+    if (!selectedOption || !options.length || !this.scroll) {
+      return;
+    }
+
+    const selectedIndex = options.findIndex(
+      option => option.id === selectedOption.id,
+    );
+
+    if (selectedIndex === -1) {
+      return;
+    }
 
     let itemStart = 0;
 
     _.forEach(itemWidths, (itemWidth, index) => {
-      if (index < key) {
+      if (index < selectedIndex) {
         itemStart += itemWidth;
       }
     });
 
-    const itemEnd = itemStart + itemWidths[key];
-
-    LayoutAnimation.easeInEaseOut();
-    onOptionSelected(option);
+    const itemEnd = itemStart + itemWidths[selectedIndex];
 
+    // Ensure item is in view
     if (itemEnd > _.last(viewportHorizontal)) {
       const extraScroll = itemEnd - _.last(viewportHorizontal);
-
-      this.scroll.scrollTo({
-        x: extraScroll + scrollOffset,
-        y: 0,
-        animated: true,
-      });
+      this.scroll.scrollTo({ x: extraScroll, y: 0, animated: true });
     }
 
     if (itemStart < _.head(viewportHorizontal)) {
-      const extraScroll = _.head(viewportHorizontal) - itemStart;
-
       this.scroll.scrollTo({
-        x: scrollOffset - extraScroll,
+        x: itemStart,
         y: 0,
         animated: true,
       });
     }
   }
 
-  handleItemLayout(key, width) {
-    const { itemWidths } = this.state;
-
-    this.setState({
-      itemWidths: {
-        ...itemWidths,
-        [key]: width,
-      },
-    });
-  }
-
   handleScroll({
     nativeEvent: {
       contentOffset: { x },
       layoutMeasurement: { width },
     },
   }) {
-    this.setState({ scrollOffset: x, viewportHorizontal: [x, x + width] });
+    this.setState({ viewportHorizontal: [x, width] });
   }
 
   handleScrollLayout({
@@ -85,6 +91,24 @@ class TabMenu extends PureComponent {
     this.setState({ viewportHorizontal: [0, width] });
   }
 
+  handleItemLayout(key, width) {
+    const { itemWidths } = this.state;
+
+    this.setState({
+      itemWidths: {
+        ...itemWidths,
+        [key]: width,
+      },
+    });
+  }
+
+  handleOptionSelected(option) {
+    const { onOptionSelected } = this.props;
+
+    LayoutAnimation.easeInEaseOut();
+    onOptionSelected(option);
+  }
+
   renderOption(option, key) {
     const { selectedOption } = this.props;
 
@@ -95,7 +119,7 @@ class TabMenu extends PureComponent {
         key={key}
         isSelected={isSelected}
         item={option}
-        onItemPressed={option => this.handleOptionSelected(key, option)}
+        onItemPressed={option => this.handleOptionSelected(option)}
         onLayoutMeasured={width => this.handleItemLayout(key, width)}
       />
     );
@@ -113,6 +137,7 @@ class TabMenu extends PureComponent {
         ref={ref => {
           this.scroll = ref;
         }}
+        scrollEventThrottle={16}
         showsHorizontalScrollIndicator={false}
         style={style.list}
       >

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/ui",
-  "version": "8.2.0",
+  "version": "8.2.1",
   "description": "Styleable set of components for React Native applications",
   "scripts": {
     "lint": "eslint .",

package/theme.js

@@ -2556,6 +2556,7 @@ export default () => {
       list: {
         flexGrow: 0,
         flexShrink: 0,
+        backgroundColor: resolveVariable('backgroundColor'),
       },
     },