@momo-kits/tab-view 0.79.6 → 0.80.1

package/index.tsx

@@ -1,4 +1,4 @@
-import React, {FC, useRef, useState} from 'react';
+import React, {FC, useCallback, useRef, useState} from 'react';
 import {LayoutChangeEvent, View} from 'react-native';
 import {Tab, TabViewProps} from './types';
 import TabBar from './tabBar/TabBar';
@@ -22,7 +22,6 @@ const TabView: FC<TabViewProps> = ({
   const isCardTab = type === 'card';
   const pagerRef = useRef<PagerView>(null);
   const [scrollX, setScrollX] = useState(0);
-
   const _onPressTabItem = (index: number) => {
     pagerRef.current?.setPage(index);
     onPressTabItem?.(index);
@@ -49,6 +48,14 @@ const TabView: FC<TabViewProps> = ({
     const {position, offset} = e.nativeEvent;
     setScrollX(position + offset);
   };
+
+  const renderScreen = useCallback(
+    (tab: Tab) => {
+      return <View>{tab.component}</View>;
+    },
+    [tabs],
+  );
+
   return (
     <View onLayout={onLayout} style={[styles.tabView, {flex: 1}]}>
       <View>
@@ -68,14 +75,12 @@ const TabView: FC<TabViewProps> = ({
         onPageSelected={onPageSelected}
         style={styles.pagerView}
         initialPage={startPage}>
-        {tabs.map((i, index) => {
-          i.component.key = `Tab View Screen ${i.title}-${index}`;
-          return i.component;
-        })}
+        {tabs.map(tab => renderScreen(tab))}
       </PagerView>
     </View>
   );
 };
 
 export default TabView;
+export {CardTabBar, ScrollableTabBar, TabBar};
 export type {TabViewProps, Tab};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/tab-view",
-    "version": "0.79.6",
+    "version": "0.80.1",
     "private": false,
     "main": "index.tsx",
     "dependencies": {},

package/tabBar/CardTabBar.tsx

@@ -1,5 +1,5 @@
-import React, {FC, useContext, useEffect, useRef} from 'react';
-import {Animated, Platform, View} from 'react-native';
+import React, {FC, useContext} from 'react';
+import {Platform, View} from 'react-native';
 import {TabBarProps} from '../types';
 import styles from '../styles';
 import {

package/tabItem/CardTabItem.tsx

@@ -1,5 +1,5 @@
 import React, {FC} from 'react';
-import {TouchableOpacity, View} from 'react-native';
+import {TouchableOpacity} from 'react-native';
 import {TabItemProps} from '../types';
 import styles from '../styles';
 import {Image, Spacing, Text} from '@momo-kits/foundation';

package/types.ts

@@ -2,34 +2,117 @@ import {ReactElement} from 'react';
 import {PagerViewProps} from 'react-native-pager-view';
 
 export type Tab = {
+  /**
+   * The title of the tab.
+   */
   title: string;
+
+  /**
+   * Optional. The icon associated with the tab, usually represented by a string referencing the icon's name or path.
+   */
   icon?: string;
+
+  /**
+   * Optional. Specifies the layout direction for the tab's content, either in a row or column format.
+   */
   direction?: 'row' | 'column';
+
+  /**
+   * The main component or content to be displayed when this tab is active.
+   */
   component: ReactElement;
+
+  /**
+   * Optional. If `true`, shows a dot indicator on the tab, often used to signal notifications or updates.
+   */
   showDot?: boolean;
+
+  /**
+   * Optional. Specifies the size of the dot indicator, either 'small' or 'large'.
+   */
   dotSize?: 'small' | 'large';
 };
 
 export type TabItemProps = {
+  /**
+   * The Tab object containing the details and content of this tab item.
+   */
   tab: Tab;
+
+  /**
+   * Indicates if this tab item is currently active or selected.
+   */
   active: boolean;
+
+  /**
+   * Optional. A callback function that is triggered when this tab item is pressed.
+   */
   onPressTabItem?: () => void;
+
+  /**
+   * Optional. Specifies the width of the tab item. Useful for customizing layout and appearance.
+   */
   width?: number;
 };
 
 export type TabViewProps = {
+  /**
+   * Optional. If `true`, allows the tab bar to be scrollable, useful for a large number of tabs.
+   */
   scrollable?: boolean;
+
+  /**
+   * An array of Tab objects representing each tab in the view.
+   */
   tabs: Tab[];
+
+  /**
+   * Optional. A callback function that is triggered when a tab item is pressed, receiving the index of the tab as a parameter.
+   */
   onPressTabItem?: (index: number) => void;
+
+  /**
+   * Optional. Specifies the visual style of the tab view, such as 'default' or 'card'.
+   */
   type?: 'default' | 'card';
+
+  /**
+   * Optional. Specifies the initial page or tab to be displayed.
+   */
   initialPage?: number;
+
+  /**
+   * Optional. Additional properties to pass to the underlying pager view component.
+   */
   pagerProps?: PagerViewProps;
 };
 
+/**
+ * Properties for the TabBar component, which displays the navigation tabs.
+ */
 export type TabBarProps = {
+  /**
+   * An array of Tab objects representing each tab in the tab bar.
+   */
   tabs: Tab[];
+
+  /**
+   * The index of the currently selected or active tab.
+   */
   selectedIndex: number;
+
+  /**
+   * Optional. A callback function that is triggered when a tab item is pressed, receiving the index of the tab as a parameter.
+   */
   onPressTabItem?: (index: number) => void;
+
+  /**
+   * The width of the container in which the tab bar is placed. Useful for layout calculations.
+   */
   containerWidth: number;
+
+  /**
+   * Represents the horizontal scroll position in a scrollable tab bar.
+   */
   scrollX: number;
 };