@widergy/mobile-ui 1.46.1 → 1.47.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [1.47.0](https://github.com/widergy/mobile-ui/compare/v1.46.1...v1.47.0) (2025-05-28)
+
+
+### Features
+
+* tabs scroll ([#435](https://github.com/widergy/mobile-ui/issues/435)) ([2e1a123](https://github.com/widergy/mobile-ui/commit/2e1a12397e82f069bf0d6329220d438224cef1fc))
+
 ## [1.46.1](https://github.com/widergy/mobile-ui/compare/v1.46.0...v1.46.1) (2025-05-23)
 
 

package/lib/components/UTTabs/README.md

@@ -1,18 +1,21 @@
 # UTTabs
 
-Tabs component.
+Tabs component with two display modes: 
+1. Fixed width (default): Tabs width are adjusted evenly to fill the container width
+2. Scrollable: Each tab has width based on its content and if all tabs don't fit in the container width, the component becomes horizontally scrollable
 
 ## Props
-Here's a new table for the additional props:
+Here's a table for the component props:
 
-| Name       | Type     | Default   | Description                                               |
-|------------|---------|------------|-----------------------------------------------------------|
-| colorTheme | string  | `accent`   | Defines the color theme for the component.                |
-| hierarchy  | string  | `primary`  | Determines the hierarchy or importance of the tabs.       |
-| onChange   | func    |            | Callback function triggered when the selected tab changes.|
-| style      | object  |            | Custom styles for component.                              |
-| tabs       | array   |            | Array of tab items to be displayed within the component.  |
-| withTabSliding | bool | `true`    | Defines if tabs can be changed with gesture.              |
+| Name          | Type     | Default   | Description                                                |
+|---------------|----------|-----------|------------------------------------------------------------|
+| colorTheme    | string   | `accent`  | Defines the color theme for the component.                 |
+| hierarchy     | string   | `primary` | Determines the hierarchy or importance of the tabs.        |
+| onChange      | func     |           | Callback function triggered when the selected tab changes. |
+| style         | object   |           | Custom styles for component.                               |
+| tabs          | array    |           | Array of tab items to be displayed within the component.   |
+| withTabSliding| bool     | `true`    | Defines if tabs can be changed with gesture.               |
+| scrollableTabs| bool     | `false`   | Enables scrollable mode with content-based tab widths.     |
 
 
 ### colorTheme
@@ -38,4 +41,17 @@ The value of `hierarchy` must be one of the following:
 - `icon`: name of `UTIcon` to render
 - `badge`: not affected by `colorTheme`
 
-Besides those, any other prop can be added to a tab to be accessed with the `onChange` callback
+Besides those, any other prop can be added to a tab to be accessed with the `onChange` callback
+
+## Behavior
+
+### Fixed Width Mode (scrollableTabs=false, default)
+- Each tab has equal width to fill the container space
+- If there are 2 tabs, each takes up 50% of the width
+- The indicator takes the same width as the tab
+
+### Scrollable Mode (scrollableTabs=true)
+- Each tab's width is determined by its content (label, icon, badge)
+- When the combined width of all tabs exceeds the container width, the component becomes horizontally scrollable
+- Selected tab is automatically scrolled into view when changed
+- The indicator follows the width of the selected tab

package/lib/components/UTTabs/index.js

@@ -1,4 +1,5 @@
-import { Animated, View, Pressable, PanResponder } from 'react-native';
+/* eslint-disable react-hooks/exhaustive-deps */
+import { Animated, View, Pressable, PanResponder, ScrollView } from 'react-native';
 import { array, bool, func, object, string } from 'prop-types';
 import React, { useEffect, useRef, useState } from 'react';
 
@@ -18,24 +19,67 @@ const UTTabs = ({
   style,
   tabs,
   theme,
-  withTabSliding = true
+  withTabSliding = true,
+  scrollableTabs = false
 }) => {
   const styles = styleSheet(theme);
   const [selectedTab, setSelectedTab] = useState(0);
+  const [scrollOffset, setScrollOffset] = useState(0);
   const position = useRef(new Animated.Value(0)).current;
+  const indicatorPos = useRef(new Animated.Value(0)).current;
+  const indicatorWidth = useRef(new Animated.Value(0)).current;
+  const scrollViewRef = useRef(null);
+  const tabRefs = useRef([]);
 
   useEffect(() => {
     onChange?.(tabs[selectedTab]);
   }, []);
 
+  useEffect(() => {
+    if (scrollableTabs) {
+      tabRefs.current = Array(tabs.length)
+        .fill()
+        .map((_, i) => tabRefs.current[i] || React.createRef());
+    }
+  }, [tabs, scrollableTabs]);
+
   useEffect(() => {
     Animated.timing(position, {
       toValue: selectedTab,
-      duration: 300
+      duration: 300,
+      useNativeDriver: false
     }).start();
+
+    if (scrollableTabs && scrollViewRef.current && tabRefs.current[selectedTab]) {
+      tabRefs.current[selectedTab].measureLayout(
+        scrollViewRef.current,
+        (x, y, width) => {
+          scrollViewRef.current?.scrollTo({ x: Math.max(0, x - 50), animated: true });
+
+          Animated.parallel([
+            Animated.timing(indicatorPos, {
+              toValue: x,
+              duration: 300,
+              useNativeDriver: false
+            }),
+            Animated.timing(indicatorWidth, {
+              toValue: width,
+              duration: 300,
+              useNativeDriver: false
+            })
+          ]).start();
+        },
+        () => {}
+      );
+    }
+
     onChange?.(tabs[selectedTab]);
   }, [selectedTab]);
 
+  const handleScroll = event => {
+    setScrollOffset(event.nativeEvent.contentOffset.x);
+  };
+
   const panResponder = useRef(
     PanResponder.create({
       onMoveShouldSetPanResponder: (_, gestureState) => Math.abs(gestureState.dx),
@@ -48,27 +92,97 @@ const UTTabs = ({
     })
   ).current;
 
-  return (
-    <View style={[styles.container, style]} {...(withTabSliding ? panResponder.panHandlers : {})}>
-      {tabs.map(({ badge, label, icon }, index) => {
-        const selected = selectedTab === index;
-        const colorThemeToUse = selected ? colorTheme : 'gray';
-        return (
-          <Pressable
-            disabled={selected}
-            key={`tab-${label || icon}`}
-            onPress={() => setSelectedTab(index)}
-            style={styles.tab(tabs.length)}
-          >
-            <UTIcon colorTheme={colorThemeToUse} name={icon} />
-            <UTLabel colorTheme={colorThemeToUse} shade="04" weight="medium" {...labelProps}>
-              {label}
-            </UTLabel>
-            {badge && <UTBadge colorTheme="accent" />}
-          </Pressable>
+  if (scrollableTabs && tabRefs.current.length !== tabs.length) {
+    tabRefs.current = Array(tabs.length)
+      .fill()
+      .map((_, i) => tabRefs.current[i] || React.createRef());
+  }
+
+  const calculatedIndicatorLeft = Animated.subtract(indicatorPos, scrollOffset);
+
+  const indicatorStyle = scrollableTabs
+    ? [
+        styles.indicator(position, tabs.length, hierarchy, colorTheme, true),
+        { width: indicatorWidth, left: calculatedIndicatorLeft }
+      ]
+    : styles.indicator(position, tabs.length, hierarchy, colorTheme, false);
+
+  useEffect(() => {
+    if (scrollableTabs && tabRefs.current[selectedTab]) {
+      setTimeout(() => {
+        tabRefs.current[selectedTab]?.measureLayout(
+          scrollViewRef.current,
+          (x, y, width) => {
+            indicatorPos.setValue(x);
+            indicatorWidth.setValue(width);
+          },
+          () => {}
         );
-      })}
-      <Animated.View style={styles.indicator(position, tabs.length, hierarchy, colorTheme)} />
+      }, 100);
+    }
+  }, [scrollableTabs]);
+
+  const fixedLabelProps = scrollableTabs
+    ? labelProps
+    : { ...labelProps, numberOfLines: 1, ellipsizeMode: 'tail' };
+
+  return (
+    <View style={[styles.containerWrapper, style]} {...(withTabSliding ? panResponder.panHandlers : {})}>
+      <Animated.View style={indicatorStyle} />
+
+      {scrollableTabs ? (
+        <ScrollView
+          ref={scrollViewRef}
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          style={styles.scrollView}
+          contentContainerStyle={styles.scrollViewContent}
+          onScroll={handleScroll}
+          scrollEventThrottle={16}
+        >
+          {tabs.map(({ badge, label, icon }, index) => {
+            const selected = selectedTab === index;
+            const colorThemeToUse = selected ? colorTheme : 'gray';
+            return (
+              <Pressable
+                ref={ref => (tabRefs.current[index] = ref)}
+                disabled={selected}
+                key={`tab-${label || icon}`}
+                onPress={() => setSelectedTab(index)}
+                style={styles.scrollableTab}
+              >
+                {icon && <UTIcon colorTheme={colorThemeToUse} name={icon} />}
+                <UTLabel colorTheme={colorThemeToUse} shade="04" weight="medium" {...labelProps}>
+                  {label}
+                </UTLabel>
+                {badge && <UTBadge colorTheme="accent" />}
+              </Pressable>
+            );
+          })}
+        </ScrollView>
+      ) : (
+        <View style={styles.container}>
+          {tabs.map(({ badge, label, icon }, index) => {
+            const selected = selectedTab === index;
+            const colorThemeToUse = selected ? colorTheme : 'gray';
+            return (
+              <Pressable
+                disabled={selected}
+                key={`tab-${label || icon}`}
+                onPress={() => setSelectedTab(index)}
+                style={styles.tab(tabs.length)}
+              >
+                {icon && <UTIcon colorTheme={colorThemeToUse} name={icon} />}
+                <UTLabel colorTheme={colorThemeToUse} shade="04" weight="medium" {...fixedLabelProps}>
+                  {label}
+                </UTLabel>
+                {badge && <UTBadge colorTheme="accent" />}
+              </Pressable>
+            );
+          })}
+        </View>
+      )}
+
       <View style={styles.border} />
     </View>
   );
@@ -82,7 +196,8 @@ UTTabs.propTypes = {
   style: object,
   tabs: array,
   theme: object,
-  withTabSliding: bool
+  withTabSliding: bool,
+  scrollableTabs: bool
 };
 
 export default withTheme(UTTabs);

package/lib/components/UTTabs/styles.js

@@ -9,74 +9,120 @@ export default StyleSheet.create(({ Palette: { accent, neutral, negative, light
     width: '100%',
     height: 1,
     backgroundColor: light['04'],
-    zIndex: 1
+    zIndex: 0
   },
-  container: { display: 'flex', flexDirection: 'row', width: '100%' },
-  indicator: (position, length, hierarchy, colorTheme) =>
-    ({
-      [HIERARCHIES.PRIMARY]: {
-        position: 'absolute',
-        bottom: 0,
-        width: `${100 / length}%`,
-        height: '100%',
-        borderRightWidth: position.interpolate({
-          inputRange: [0, length - 1],
-          outputRange: [1, 0]
-        }),
-        borderTopRightRadius: position.interpolate({
-          inputRange: [0, length - 1],
-          outputRange: [4, 0]
-        }),
-        borderLeftWidth: position.interpolate({
-          inputRange: [0, 1],
-          outputRange: [0, 1],
-          extrapolate: 'clamp'
-        }),
-        borderTopLeftRadius: position.interpolate({
-          inputRange: [0, 1],
-          outputRange: [0, 4],
-          extrapolate: 'clamp'
-        }),
-        backgroundColor: light['01'],
-        borderTopWidth: 1,
-        borderTopColor: light['04'],
-        borderLeftColor: light['04'],
-        borderRightColor: light['04'],
-        borderBottomWidth: 1,
-        borderBottomColor: light['01'],
-        left: position.interpolate({
-          inputRange: [0, length],
-          outputRange: ['0%', '100%']
-        }),
-        zIndex: 2
-      },
-      [HIERARCHIES.SECONDARY]: {
-        position: 'absolute',
-        bottom: 0,
-        width: `${100 / length}%`,
-        height: 4,
-        backgroundColor: {
-          [COLOR_THEMES.ACCENT]: accent['04'],
-          [COLOR_THEMES.NEUTRAL]: neutral['04'],
-          [COLOR_THEMES.NEGATIVE]: negative['04']
-        }[colorTheme],
-        left: position.interpolate({
-          inputRange: [0, length],
-          outputRange: ['0%', '100%']
-        })
-      }
-    })[hierarchy],
+  containerWrapper: {
+    position: 'relative',
+    width: '100%'
+  },
+  container: {
+    display: 'flex',
+    flexDirection: 'row',
+    width: '100%',
+    zIndex: 3
+  },
+  scrollView: {
+    flexDirection: 'row',
+    width: '100%',
+    zIndex: 3
+  },
+  scrollViewContent: {
+    flexDirection: 'row',
+    flexGrow: 1
+  },
+  indicator: (position, length, hierarchy, colorTheme, isScrollable = false) => {
+    const baseStyle = {
+      position: 'absolute',
+      bottom: 0,
+      zIndex: 1
+    };
+
+    const heightStyle = hierarchy === HIERARCHIES.PRIMARY ? { height: '100%' } : { height: 4 };
+
+    const backgroundColorStyle = {
+      backgroundColor:
+        hierarchy === HIERARCHIES.PRIMARY
+          ? light['01']
+          : {
+              [COLOR_THEMES.ACCENT]: accent['04'],
+              [COLOR_THEMES.NEUTRAL]: neutral['04'],
+              [COLOR_THEMES.NEGATIVE]: negative['04']
+            }[colorTheme]
+    };
+
+    const primaryBorderStyles =
+      hierarchy === HIERARCHIES.PRIMARY
+        ? {
+            borderTopWidth: 1,
+            borderTopColor: light['04'],
+            borderLeftColor: light['04'],
+            borderRightColor: light['04'],
+            borderBottomWidth: 1,
+            borderBottomColor: light['01'],
+            borderRightWidth: position.interpolate({
+              inputRange: [0, length - 1],
+              outputRange: [1, 0]
+            }),
+            borderTopRightRadius: position.interpolate({
+              inputRange: [0, length - 1],
+              outputRange: [4, 0]
+            }),
+            borderLeftWidth: position.interpolate({
+              inputRange: [0, 1],
+              outputRange: [0, 1],
+              extrapolate: 'clamp'
+            }),
+            borderTopLeftRadius: position.interpolate({
+              inputRange: [0, 1],
+              outputRange: [0, 4],
+              extrapolate: 'clamp'
+            })
+          }
+        : {};
+
+    const positioningStyles = isScrollable
+      ? {}
+      : {
+          width: `${100 / length}%`,
+          left: position.interpolate({
+            inputRange: [0, length],
+            outputRange: ['0%', '100%']
+          })
+        };
+
+    return {
+      ...baseStyle,
+      ...heightStyle,
+      ...backgroundColorStyle,
+      ...primaryBorderStyles,
+      ...positioningStyles
+    };
+  },
+  // Original fixed-width tab style (for scrollableTabs=false)
   tab:
     tabs =>
     ({ pressed }) => ({
       alignItems: 'center',
       display: 'flex',
-      flexBasis: `${100 / tabs}%`,
       flexDirection: 'row',
+      flexBasis: tabs ? `${100 / tabs}%` : 'auto',
+      paddingHorizontal: 16,
       gap: 8,
       height: 48,
       justifyContent: 'center',
       zIndex: 3,
       backgroundColor: pressed ? accent['01'] : null
-    })
+    }),
+  // Scrollable tab style (for scrollableTabs=true)
+  scrollableTab: ({ pressed }) => ({
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    paddingHorizontal: 16,
+    gap: 8,
+    height: 48,
+    justifyContent: 'center',
+    zIndex: 3,
+    backgroundColor: pressed ? accent['01'] : null
+  })
 }));

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "1.46.1",
+  "version": "1.47.0",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [