@momo-kits/tab-view 0.154.1-beta.11 → 0.154.1-beta.13

package/index.tsx

@@ -3,6 +3,7 @@ import React, {
   ForwardRefRenderFunction,
   useCallback,
   useContext,
+  useEffect,
   useImperativeHandle,
   useMemo,
   useRef,
@@ -38,6 +39,7 @@ const TabComponent: ForwardRefRenderFunction<TabViewRef, TabViewProps> = (
     style,
     accessibilityLabel,
     accessibilityLabelForSelectedCard,
+    fitContent = false,
   },
   ref,
 ) => {
@@ -66,7 +68,10 @@ const TabComponent: ForwardRefRenderFunction<TabViewRef, TabViewProps> = (
 
   const _onPressTabItem = (index: number) => {
     onPressTabItem?.(index);
-    pagerRef.current?.setPage(index);
+    
+    if (!fitContent) {
+      pagerRef.current?.setPage(index);
+    }
 
     if (!lazy.includes(index)) {
       lazy.push(index);
@@ -99,6 +104,12 @@ const TabComponent: ForwardRefRenderFunction<TabViewRef, TabViewProps> = (
     pagerProps?.onPageScroll?.(e);
   };
 
+  useEffect(() => {
+    if (fitContent) {
+      scrollX.current.setValue(selectedIndex);
+    }
+  }, [selectedIndex, fitContent]);
+
   const renderScreen = useCallback(
     (tab: Tab, index: number) => {
       if (!lazy.includes(index)) return <View key={`TabView-page-${index}`} />;
@@ -109,14 +120,23 @@ const TabComponent: ForwardRefRenderFunction<TabViewRef, TabViewProps> = (
 
   useImperativeHandle(ref, () => ({
     goToPage: (page: number) => {
-      if (page >= 0 && page <= tabs.length) pagerRef.current?.setPage(page);
+      if (page >= 0 && page <= tabs.length) {
+        if (fitContent) {
+          setSelectedIndex(page);
+          if (!lazy.includes(page)) {
+            lazy.push(page);
+          }
+        } else {
+          pagerRef.current?.setPage(page);
+        }
+      }
     },
   }));
 
   return (
     <View
       onLayout={onLayout}
-      style={[styles.tabView, { flex: 1 }]}
+      style={[styles.tabView, fitContent ? {} : { flex: 1 }]}
       accessibilityLabel={componentId}
     >
       <Animated.View style={style}>
@@ -133,21 +153,27 @@ const TabComponent: ForwardRefRenderFunction<TabViewRef, TabViewProps> = (
         />
       </Animated.View>
 
-      <PagerView
-        {...pagerProps}
-        onPageScroll={onPageScroll}
-        ref={pagerRef}
-        scrollEnabled={scrollEnabled.current}
-        onLayout={e => {
-          pagerProps?.onLayout?.(e);
-          scrollEnabled.current = pagerProps?.scrollEnabled ?? false;
-        }}
-        onPageSelected={onPageSelected}
-        style={styles.pagerView}
-        initialPage={startPage}
-      >
-        {tabs.map((tab, index) => renderScreen(tab, index))}
-      </PagerView>
+      {fitContent ? (
+        <View>
+          {tabs[selectedIndex]?.component}
+        </View>
+      ) : (
+        <PagerView
+          {...pagerProps}
+          onPageScroll={onPageScroll}
+          ref={pagerRef}
+          scrollEnabled={scrollEnabled.current}
+          onLayout={e => {
+            pagerProps?.onLayout?.(e);
+            scrollEnabled.current = pagerProps?.scrollEnabled ?? false;
+          }}
+          onPageSelected={onPageSelected}
+          style={styles.pagerView}
+          initialPage={startPage}
+        >
+          {tabs.map((tab, index) => renderScreen(tab, index))}
+        </PagerView>
+      )}
     </View>
   );
 };

package/package.json

@@ -1,16 +1,16 @@
 {
-    "name": "@momo-kits/tab-view",
-    "version": "0.154.1-beta.11",
-    "private": false,
-    "main": "index.tsx",
-    "peerDependencies": {
-        "@momo-kits/foundation": "latest",
-        "react": "*",
-        "react-native": "*"
-    },
-    "license": "MoMo",
-    "publishConfig": {
-        "registry": "https://registry.npmjs.org/"
-    },
-    "dependencies": {}
-}
+  "name": "@momo-kits/tab-view",
+  "version": "0.154.1-beta.13",
+  "private": false,
+  "main": "index.tsx",
+  "peerDependencies": {
+    "@momo-kits/foundation": "latest",
+    "react": "*",
+    "react-native": "*"
+  },
+  "license": "MoMo",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {}
+}

package/tabItem/CardTabItem.tsx

@@ -1,6 +1,6 @@
-import React, {FC, useContext, useMemo} from 'react';
-import {TouchableOpacity, View} from 'react-native';
-import {TabItemProps} from '../types';
+import React, { FC, useContext, useMemo } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { TabItemProps } from '../types';
 import styles from '../styles';
 import {
   Badge,
@@ -10,6 +10,7 @@ import {
   ScreenContext,
   Spacing,
   Text,
+  useScaleSize,
 } from '@momo-kits/foundation';
 
 const CardTabItem: FC<TabItemProps> = ({
@@ -49,14 +50,19 @@ const CardTabItem: FC<TabItemProps> = ({
       <>
         {typeof renderIcon === 'function' && (
           <View
-            style={[styles.icon, styles.iconHolder, {marginRight: Spacing.XS}]}>
+            style={[
+              styles.icon,
+              styles.iconHolder,
+              { marginRight: Spacing.XS },
+            ]}
+          >
             {renderIcon(active)}
           </View>
         )}
         {!renderIcon && !!icon && (
           <Icon
             color={color}
-            style={[styles.icon, {marginRight: Spacing.XS}]}
+            style={[styles.icon, { marginRight: Spacing.XS }]}
             source={icon}
           />
         )}
@@ -67,15 +73,22 @@ const CardTabItem: FC<TabItemProps> = ({
   return (
     <TouchableOpacity
       onPress={onPressTabItem}
-      style={[styles.cardTabItem, {width}]}
+      style={[
+        styles.cardTabItem,
+        {
+          width,
+        },
+      ]}
       accessibilityLabel={componentId}
-      accessibilityState={{checked: active}}>
+      accessibilityState={{ checked: active }}
+    >
       {renderIconTabItem()}
       <Text
         numberOfLines={1}
-        style={[styles.textCenter, {flexShrink: 1}]}
+        style={[styles.textCenter, { flexShrink: 1 }]}
         typography={'body_default_regular'}
-        accessibilityLabel={`${componentId}|text`}>
+        accessibilityLabel={`${componentId}|text`}
+      >
         {title}
       </Text>
       {showDot && (
@@ -90,7 +103,7 @@ const CardTabItem: FC<TabItemProps> = ({
         <View>
           <Badge
             label={badgeValue}
-            style={{marginLeft: Spacing.XS}}
+            style={{ marginLeft: Spacing.XS }}
             accessibilityLabel={`${componentId}|badge`}
           />
         </View>

package/tabItem/TabItem.tsx

@@ -40,6 +40,7 @@ const TabItem: FC<TabItemProps> = ({
   const dotStyle = dotSize === 'large' ? styles.dot : styles.dotSmall;
   const app = useContext<any>(MiniAppContext);
   const screen = useContext<any>(ScreenContext);
+  const size48 = useScaleSize(48);
 
   const componentName = 'TabItem';
 
@@ -55,28 +56,30 @@ const TabItem: FC<TabItemProps> = ({
     return (
       <TouchableOpacity
         accessibilityLabel={componentId}
-        accessibilityState={{checked: active}}
+        accessibilityState={{ checked: active }}
         style={[
           styles.tabItem,
           {
             width,
-            height:48,
+            height: size48,
             flexDirection: 'row',
             overflow: 'hidden',
             paddingVertical: Spacing.M,
             paddingHorizontal: Spacing.M,
           },
         ]}
-        onPress={onPressTabItem}>
+        onPress={onPressTabItem}
+      >
         {renderIcon && typeof renderIcon === 'function' && (
           <View
-            style={[styles.icon, styles.iconHolder, {marginRight: Spacing.S}]}>
+            style={[styles.icon, styles.iconHolder, { marginRight: Spacing.S }]}
+          >
             {renderIcon(active)}
           </View>
         )}
         {!renderIcon && !!icon && (
           <Icon
-            style={[styles.icon, {marginRight: Spacing.S}]}
+            style={[styles.icon, { marginRight: Spacing.S }]}
             source={icon}
             color={color}
           />
@@ -85,18 +88,19 @@ const TabItem: FC<TabItemProps> = ({
           numberOfLines={1}
           typography={typography}
           color={color}
-          style={{flexShrink: 1}}
-          accessibilityLabel={`${componentId}|text`}>
+          style={{ flexShrink: 1 }}
+          accessibilityLabel={`${componentId}|text`}
+        >
           {title}
         </Text>
         {showDot && (
-          <BadgeDot size={dotSize} style={{marginLeft: Spacing.XS}} />
+          <BadgeDot size={dotSize} style={{ marginLeft: Spacing.XS }} />
         )}
         {!showDot && badgeValue && (
           <View>
             <Badge
               label={badgeValue}
-              style={{marginLeft: Spacing.XS}}
+              style={{ marginLeft: Spacing.XS }}
               accessibilityLabel={`${componentId}|badge`}
             />
           </View>
@@ -121,15 +125,17 @@ const TabItem: FC<TabItemProps> = ({
         ]}
         onPress={onPressTabItem}
         accessibilityLabel={componentId}
-        accessibilityState={{checked: active}}>
+        accessibilityState={{ checked: active }}
+      >
         <View>
           {renderIcon && typeof renderIcon === 'function' && (
             <View
               style={[
                 styles.icon,
                 styles.iconHolder,
-                {marginBottom: Spacing.XS},
-              ]}>
+                { marginBottom: Spacing.XS },
+              ]}
+            >
               {renderIcon(active)}
             </View>
           )}
@@ -160,7 +166,8 @@ const TabItem: FC<TabItemProps> = ({
           numberOfLines={1}
           typography={typography}
           color={color}
-          accessibilityLabel={`${componentId}|text`}>
+          accessibilityLabel={`${componentId}|text`}
+        >
           {title}
         </Text>
       </TouchableOpacity>

package/types.ts

@@ -111,6 +111,13 @@ export type TabViewProps = {
   accessibilityLabel?: string;
 
   accessibilityLabelForSelectedCard?: string;
+
+  /**
+   * Optional. If `true`, the TabView will wrap its content height instead of using flex layout.
+   * When enabled, swipe gestures are disabled and only the selected tab content is rendered.
+   * Default is `false` (uses PagerView with flex layout and swipe enabled).
+   */
+  fitContent?: boolean;
 };
 
 /**