@momo-kits/tab-view 0.89.5 → 0.89.6-rc.1

package/index.tsx

@@ -1,30 +1,51 @@
-import React, {FC, useCallback, useRef, useState} from 'react';
-import {LayoutChangeEvent, View} from 'react-native';
-import {Tab, TabViewProps} from './types';
+import React, {
+  forwardRef,
+  ForwardRefRenderFunction,
+  useCallback,
+  useContext,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+import {Animated, LayoutChangeEvent, View} from 'react-native';
+import {Tab, TabViewProps, TabViewRef} from './types';
 import TabBar from './tabBar/TabBar';
 import styles from './styles';
 import CardTabBar from './tabBar/CardTabBar';
 import ScrollableTabBar from './tabBar/SrollableTabBar';
 import PagerView from 'react-native-pager-view';
+import {ApplicationContext} from '@momo-kits/foundation';
 
-const TabView: FC<TabViewProps> = ({
-  scrollable = false,
-  tabs = [],
-  onPressTabItem,
-  type = 'default',
-  initialPage = 0,
-  pagerProps,
-}) => {
+const TabComponent: ForwardRefRenderFunction<TabViewRef, TabViewProps> = (
+  {
+    scrollable = false,
+    tabs = [],
+    onPressTabItem,
+    type = 'default',
+    initialPage = 0,
+    pagerProps,
+    direction,
+    selectedColor,
+    unselectedColor,
+  },
+  ref
+) => {
   const startPage =
     initialPage > tabs.length - 1 ? tabs.length - 1 : initialPage;
   const [selectedIndex, setSelectedIndex] = useState(startPage);
   const [tabBarWidth, setTabBarWidth] = useState(0);
   const isCardTab = type === 'card';
   const pagerRef = useRef<PagerView>(null);
-  const [scrollX, setScrollX] = useState(0);
+  const scrollX = useRef(new Animated.Value(startPage));
+  const lazy = useRef([selectedIndex]).current;
+  const {theme} = useContext(ApplicationContext);
   const _onPressTabItem = (index: number) => {
-    pagerRef.current?.setPage(index);
     onPressTabItem?.(index);
+    pagerRef.current?.setPage(index);
+
+    if (!lazy.includes(index)) {
+      lazy.push(index);
+    }
     setSelectedIndex(index);
   };
 
@@ -32,10 +53,12 @@ const TabView: FC<TabViewProps> = ({
     setTabBarWidth(e.nativeEvent.layout.width);
   };
 
-  const onPageSelected = (e: {
-    nativeEvent: {position: React.SetStateAction<number>};
-  }) => {
-    setSelectedIndex(e.nativeEvent.position);
+  const onPageSelected = (e: {nativeEvent: {position: number}}) => {
+    const {position} = e.nativeEvent;
+    if (!lazy.includes(position)) {
+      lazy.push(position);
+    }
+    setSelectedIndex(position);
   };
 
   let TabBarComponent = scrollable ? ScrollableTabBar : TabBar;
@@ -46,16 +69,23 @@ const TabView: FC<TabViewProps> = ({
 
   const onPageScroll = (e: {nativeEvent: {position: any; offset: any}}) => {
     const {position, offset} = e.nativeEvent;
-    setScrollX(position + offset);
+    scrollX.current.setValue(position + offset);
   };
 
   const renderScreen = useCallback(
-    (tab: Tab) => {
+    (tab: Tab, index: number) => {
+      if (!lazy.includes(index)) return <View />;
       return <View>{tab.component}</View>;
     },
-    [tabs],
+    [tabs]
   );
 
+  useImperativeHandle(ref, () => ({
+    goToPage: (page: number) => {
+      if (page >= 0 && page <= tabs.length) pagerRef.current?.setPage(page);
+    },
+  }));
+
   return (
     <View onLayout={onLayout} style={[styles.tabView, {flex: 1}]}>
       <View>
@@ -64,7 +94,10 @@ const TabView: FC<TabViewProps> = ({
           selectedIndex={selectedIndex}
           tabs={tabs}
           containerWidth={tabBarWidth}
-          scrollX={scrollX}
+          scrollX={scrollX.current}
+          direction={direction}
+          selectedColor={selectedColor ?? theme.colors.primary}
+          unselectedColor={unselectedColor ?? theme.colors.text.default}
         />
       </View>
 
@@ -75,11 +108,13 @@ const TabView: FC<TabViewProps> = ({
         onPageSelected={onPageSelected}
         style={styles.pagerView}
         initialPage={startPage}>
-        {tabs.map(tab => renderScreen(tab))}
+        {tabs.map((tab, index) => renderScreen(tab, index))}
       </PagerView>
     </View>
   );
 };
 
+const TabView = forwardRef(TabComponent);
+
 export {CardTabBar, ScrollableTabBar, TabBar, TabView};
 export type {TabViewProps, Tab};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/tab-view",
-    "version": "0.89.5",
+    "version": "0.89.6-rc.1",
     "private": false,
     "main": "index.tsx",
     "dependencies": {},
@@ -14,4 +14,4 @@
         "@momo-platform/versions": "4.1.11"
     },
     "license": "MoMo"
-}
+}

package/publish.sh

@@ -1,29 +1,27 @@
 #!/bin/bash
+
+# Prepare dist files
 rm -rf dist
 mkdir dist
-
-cp . ./dist
-
-# GET VERSION from mck_package.json
-VERSIONSTRING=( v$(jq .version package.json) )
-VERSION=(${VERSIONSTRING//[\"]/})
-echo VERSION: $VERSION
-
-rsync -r --verbose --exclude '*.mdx' --exclude '*Demo.js'  --exclude 'props-type.js' --exclude 'prop-types.js' ./* dist
-
-# #babel component to dist
-#babel ./dist -d dist --copy-files
-
-#copy option
-#cp -r ./src/ dist
-
-
-#npm login
-#publish dist to npm
+rsync -r --exclude=/dist ./* dist
 cd dist
-npm publish --tag beta --access=public
+
+if [ "$1" == "stable" ]; then
+  npm version $(npm view @momo-kits/foundation@stable version)
+  npm version patch
+  npm publish --tag stable --access=public
+elif [ "$1" == "latest" ]; then
+  npm version $(npm view @momo-kits/foundation@latest version)
+  npm publish --tag latest --access=public
+else
+  npm version $(npm view @momo-kits/tab-view@beta version)
+  npm version prerelease --preid=beta
+  npm publish --tag beta --access=public
+fi
+
+PACKAGE_NAME=$(npm pkg get name)
+NEW_PACKAGE_VERSION=$(npm pkg get version)
+
+# Clean up
 cd ..
 rm -rf dist
-
-
-##curl -X POST -H 'Content-Type: application/json' 'https://chat.googleapis.com/v1/spaces/AAAAbP8987c/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=UGSFRvk_oYb9uGsAgs31bVvMm6jDkmD8zihGm3eyaQA%3D&threadKey=JoaXTEYaNNkl' -d '{"text": "@momo-kits/tab-view new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/tab-view"}'

package/styles.ts

@@ -14,7 +14,6 @@ export default StyleSheet.create({
     borderBottomWidth: 1,
   },
   tabItem: {
-    padding: Spacing.M,
     alignItems: 'center',
     justifyContent: 'center',
   },
@@ -26,9 +25,15 @@ export default StyleSheet.create({
     bottom: 0,
   },
   icon: {
+    borderRadius: Radius.XS,
+  },
+  iconHolder: {
+    marginRight: Spacing.XS,
     width: 24,
     height: 24,
-    borderRadius: Radius.XS,
+    justifyContent: 'center',
+    alignItems: 'center',
+    overflow: 'hidden',
   },
   tabItemWrapper: {
     paddingHorizontal: Spacing.XS,
@@ -47,6 +52,9 @@ export default StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
+    paddingHorizontal: Spacing.S,
+    paddingTop: Spacing.S,
+    paddingBottom: Spacing.M,
   },
   cardTabOverlay: {
     flexDirection: 'row',
@@ -60,19 +68,26 @@ export default StyleSheet.create({
     height: '100%',
     alignItems: 'center',
     justifyContent: 'center',
-    paddingTop: Spacing.XS,
+    paddingVertical: Spacing.M,
+    paddingHorizontal: Spacing.S,
     flexDirection: 'row',
   },
   dotSmall: {
     position: 'absolute',
-    top: -Spacing.XXS,
-    right: -Spacing.XXS,
+    top: -Spacing.XS,
+    right: -Spacing.XS,
     zIndex: 2,
   },
   dot: {
     position: 'absolute',
     top: -Spacing.S,
-    right: -Spacing.XS,
+    right: -Spacing.S,
+    zIndex: 2,
+  },
+  badge: {
+    position: 'absolute',
+    top: -Spacing.S,
+    left: Spacing.S,
     zIndex: 2,
   },
 });

package/tabBar/CardTabBar.tsx

@@ -4,7 +4,9 @@ import {TabBarProps} from '../types';
 import styles from '../styles';
 import {
   ApplicationContext,
-  Image,
+  Badge,
+  BadgeDot,
+  Icon,
   Radius,
   Shadow,
   Spacing,
@@ -18,6 +20,8 @@ const CardTabBar: FC<TabBarProps> = ({
   onPressTabItem,
   containerWidth,
   selectedIndex,
+  selectedColor,
+  unselectedColor,
 }) => {
   const {theme} = useContext(ApplicationContext);
   const itemWidth = containerWidth / tabs.length;
@@ -36,6 +40,8 @@ const CardTabBar: FC<TabBarProps> = ({
               onPressTabItem?.(index);
             }}
             width={itemWidth}
+            selectedColor={selectedColor}
+            unselectedColor={unselectedColor}
           />
         );
       })}
@@ -52,6 +58,7 @@ const CardTabBar: FC<TabBarProps> = ({
           <PathSvg style={{transform: [{rotateY: '180deg'}], left: 8}} />
         )}
         <View
+          accessibilityLabel={tabs[selectedIndex]?.accessibilityLabel}
           style={[
             styles.overlayTextWrapper,
             {
@@ -59,21 +66,50 @@ const CardTabBar: FC<TabBarProps> = ({
               width: containerWidth / tabs.length,
               borderTopRightRadius: Radius.M,
               borderTopLeftRadius: Radius.M,
+              paddingHorizontal: tabs.length === 3 ? Spacing.S : Spacing.M,
             },
           ]}>
-          {!!tabs[selectedIndex]?.icon && (
-            <Image
-              source={{uri: tabs[selectedIndex]?.icon}}
+          {!!tabs[selectedIndex]?.renderIcon &&
+            typeof tabs[selectedIndex]?.renderIcon === 'function' && (
+              <View
+                style={[
+                  styles.icon,
+                  styles.iconHolder,
+                  {marginRight: Spacing.XS},
+                ]}>
+                {tabs[selectedIndex]?.renderIcon?.(true)}
+              </View>
+            )}
+          {!tabs[selectedIndex]?.renderIcon && !!tabs[selectedIndex]?.icon && (
+            <Icon
+              color={selectedColor}
+              source={tabs[selectedIndex]?.icon as string}
               style={[styles.icon, {marginRight: Spacing.XS}]}
             />
           )}
           <Text
-            color={theme.colors.primary}
+            color={selectedColor}
             numberOfLines={1}
-            style={styles.textCenter}
+            style={[styles.textCenter, {flexShrink: 1}]}
             typography={'header_s_semibold'}>
             {tabs[selectedIndex]?.title || ''}
           </Text>
+          {tabs[selectedIndex]?.showDot && (
+            <BadgeDot
+              size={tabs[selectedIndex]?.dotSize ?? 'small'}
+              style={{
+                marginLeft: Spacing.XS,
+              }}
+            />
+          )}
+          {!tabs[selectedIndex]?.showDot && tabs[selectedIndex]?.badgeValue && (
+            <View>
+              <Badge
+                label={tabs[selectedIndex]?.badgeValue}
+                style={{marginLeft: Spacing.XS}}
+              />
+            </View>
+          )}
         </View>
         {!isLast && <PathSvg style={{right: 8}} />}
       </View>

package/tabBar/SrollableTabBar.tsx

@@ -9,12 +9,16 @@ const ScrollableTabBar: FC<TabBarProps> = ({
   tabs = [],
   onPressTabItem,
   selectedIndex,
+  selectedColor,
+  unselectedColor,
+  direction,
 }) => {
   const {theme} = useContext(ApplicationContext);
   const [itemWidthMap, setItemWidthMap] = useState<
     {width: number; x: number}[]
   >([]);
   const animatedWidth = useRef(new Animated.Value(0)).current;
+  const animX = useRef(new Animated.Value(0)).current;
   const scrollViewRef = useRef<ScrollView>(null);
 
   useEffect(() => {
@@ -22,11 +26,18 @@ const ScrollableTabBar: FC<TabBarProps> = ({
     scrollToIndex(selectedIndex);
   }, [selectedIndex, itemWidthMap]);
   const moveIndicator = () => {
-    Animated.timing(animatedWidth, {
-      toValue: itemWidthMap[selectedIndex]?.width || 0,
-      duration: 250,
-      useNativeDriver: false,
-    }).start();
+    Animated.parallel([
+      Animated.timing(animatedWidth, {
+        toValue: itemWidthMap[selectedIndex]?.width || 0,
+        duration: 250,
+        useNativeDriver: false,
+      }),
+      Animated.timing(animX, {
+        toValue: itemWidthMap[selectedIndex]?.x || 0,
+        duration: 250,
+        useNativeDriver: false,
+      }),
+    ]).start();
   };
 
   const onLayout = (e: LayoutChangeEvent, index: number) => {
@@ -62,6 +73,9 @@ const ScrollableTabBar: FC<TabBarProps> = ({
           }}
           active={isActive}
           tab={item}
+          selectedColor={selectedColor}
+          unselectedColor={unselectedColor}
+          direction={direction}
         />
       </View>
     );
@@ -84,9 +98,9 @@ const ScrollableTabBar: FC<TabBarProps> = ({
         style={[
           styles.indicator,
           {
-            left: itemWidthMap[selectedIndex]?.x || 0,
+            left: animX,
             width: animatedWidth,
-            backgroundColor: theme.colors.primary,
+            backgroundColor: selectedColor,
           },
         ]}
       />

package/tabBar/TabBar.tsx

@@ -11,9 +11,11 @@ const TabBar: FC<TabBarProps> = ({
   onPressTabItem,
   containerWidth = 0,
   scrollX,
+  direction,
+  selectedColor,
+  unselectedColor,
 }) => {
   const {theme} = useContext(ApplicationContext);
-
   const itemWidth = containerWidth / tabs.length;
 
   return (
@@ -35,6 +37,9 @@ const TabBar: FC<TabBarProps> = ({
             }}
             active={selectedIndex === index}
             tab={tab}
+            direction={direction}
+            selectedColor={selectedColor}
+            unselectedColor={unselectedColor}
           />
         );
       })}
@@ -42,9 +47,16 @@ const TabBar: FC<TabBarProps> = ({
         style={[
           styles.indicator,
           {
-            left: scrollX * itemWidth + Spacing.XS,
+            left: scrollX.interpolate({
+              inputRange: [0, tabs.length - 1],
+              outputRange: [
+                Spacing.XS,
+                (tabs.length - 1) * itemWidth + Spacing.XS,
+              ],
+              extrapolate: 'clamp',
+            }),
             width: itemWidth - Spacing.XS * 2,
-            backgroundColor: theme.colors.primary,
+            backgroundColor: selectedColor,
           },
         ]}
       />

package/tabItem/CardTabItem.tsx

@@ -1,28 +1,66 @@
 import React, {FC} from 'react';
-import {TouchableOpacity} from 'react-native';
+import {TouchableOpacity, View} from 'react-native';
 import {TabItemProps} from '../types';
 import styles from '../styles';
-import {Image, Spacing, Text} from '@momo-kits/foundation';
+import {Badge, BadgeDot, Icon, Spacing, Text} from '@momo-kits/foundation';
 
-const CardTabItem: FC<TabItemProps> = ({tab, onPressTabItem, width}) => {
-  const {title, icon} = tab;
+const CardTabItem: FC<TabItemProps> = ({
+  tab,
+  active,
+  onPressTabItem,
+  width,
+  selectedColor,
+  unselectedColor,
+}) => {
+  const {
+    title,
+    icon,
+    renderIcon,
+    showDot = false,
+    dotSize = 'small',
+    badgeValue,
+    accessibilityLabel,
+  } = tab;
+  const color = active ? selectedColor : unselectedColor;
 
   return (
     <TouchableOpacity
       onPress={onPressTabItem}
-      style={[styles.cardTabItem, {width}]}>
-      {!!icon && (
-        <Image
-          source={{uri: icon}}
+      style={[styles.cardTabItem, {width}]}
+      accessibilityLabel={accessibilityLabel}>
+      {renderIcon &&
+        !['string', 'boolean', 'number'].includes(typeof renderIcon) && (
+          <View
+            style={[styles.icon, styles.iconHolder, {marginRight: Spacing.XS}]}>
+            {renderIcon}
+          </View>
+        )}
+      {!renderIcon && !!icon && (
+        <Icon
+          color={color}
           style={[styles.icon, {marginRight: Spacing.XS}]}
+          source={icon}
         />
       )}
       <Text
         numberOfLines={1}
-        style={styles.textCenter}
+        style={[styles.textCenter, {flexShrink: 1}]}
         typography={'body_default_regular'}>
         {title}
       </Text>
+      {showDot && (
+        <BadgeDot
+          size={dotSize}
+          style={{
+            marginLeft: Spacing.XS,
+          }}
+        />
+      )}
+      {!showDot && badgeValue && (
+        <View>
+          <Badge label={badgeValue} style={{marginLeft: Spacing.XS}} />
+        </View>
+      )}
     </TouchableOpacity>
   );
 };

package/tabItem/TabItem.tsx

@@ -1,58 +1,143 @@
-import React, {FC, useContext} from 'react';
-import {ImageStyle} from 'react-native-fast-image';
-import {TouchableOpacity, View, ViewStyle} from 'react-native';
+import React, {FC} from 'react';
+import {TouchableOpacity, View} from 'react-native';
 import {TabItemProps} from '../types';
 import {
-  ApplicationContext,
+  Badge,
   BadgeDot,
-  Image,
+  Icon,
+  scaleSize,
   Spacing,
   Text,
   Typography,
 } from '@momo-kits/foundation';
 import styles from '../styles';
 
-const TabItem: FC<TabItemProps> = ({tab, active, onPressTabItem, width}) => {
-  const {theme} = useContext(ApplicationContext);
+const TabItem: FC<TabItemProps> = ({
+  tab,
+  active,
+  onPressTabItem,
+  width,
+  direction,
+  selectedColor,
+  unselectedColor,
+}) => {
   const {
     title,
     icon,
-    direction = 'row',
     showDot = false,
     dotSize = 'small',
+    badgeValue,
+    renderIcon,
+    accessibilityLabel,
   } = tab;
   const typography: Typography = active
     ? 'header_s_semibold'
     : 'body_default_regular';
-  const color = active ? theme.colors.primary : theme.colors.text.default;
+  const color = active ? selectedColor : unselectedColor;
   const dotStyle = dotSize === 'large' ? styles.dot : styles.dotSmall;
-  const iconStyle: ViewStyle =
-    direction === 'row'
-      ? {marginRight: Spacing.XS}
-      : {marginBottom: Spacing.XS};
 
-  return (
-    <TouchableOpacity
-      onPress={onPressTabItem}
-      style={[styles.tabItem, {width, flexDirection: direction}]}>
-      {!!icon && (
-        <View>
-          {showDot && <BadgeDot style={dotStyle} size={dotSize} />}
-          <Image
-            style={[styles.icon, iconStyle as ImageStyle]}
-            source={{uri: icon}}
+  const renderRowItem = () => {
+    return (
+      <TouchableOpacity
+        accessibilityLabel={accessibilityLabel}
+        style={[
+          styles.tabItem,
+          {
+            width,
+            height: scaleSize(48),
+            flexDirection: 'row',
+            overflow: 'hidden',
+            paddingVertical: Spacing.M,
+            paddingHorizontal: Spacing.M,
+          },
+        ]}
+        onPress={onPressTabItem}>
+        {renderIcon && typeof renderIcon === 'function' && (
+          <View
+            style={[styles.icon, styles.iconHolder, {marginRight: Spacing.S}]}>
+            {renderIcon(active)}
+          </View>
+        )}
+        {!renderIcon && !!icon && (
+          <Icon
+            style={[styles.icon, {marginRight: Spacing.S}]}
+            source={icon}
+            color={color}
           />
+        )}
+        <Text
+          numberOfLines={1}
+          typography={typography}
+          color={color}
+          style={{flexShrink: 1}}>
+          {title}
+        </Text>
+        {showDot && (
+          <BadgeDot size={dotSize} style={{marginLeft: Spacing.XS}} />
+        )}
+        {!showDot && badgeValue && (
+          <View>
+            <Badge label={badgeValue} style={{marginLeft: Spacing.XS}} />
+          </View>
+        )}
+      </TouchableOpacity>
+    );
+  };
+
+  const renderColumnItem = () => {
+    return (
+      <TouchableOpacity
+        style={[
+          styles.tabItem,
+          {
+            width,
+            height: scaleSize(68),
+            flexDirection: 'column',
+            overflow: 'hidden',
+            paddingHorizontal: Spacing.M,
+            paddingVertical: Spacing.M,
+          },
+        ]}
+        onPress={onPressTabItem}
+        accessibilityLabel={accessibilityLabel}>
+        <View>
+          {renderIcon && typeof renderIcon === 'function' && (
+            <View
+              style={[
+                styles.icon,
+                styles.iconHolder,
+                {marginBottom: Spacing.XS},
+              ]}>
+              {renderIcon(active)}
+            </View>
+          )}
+          {!renderIcon && !!icon && (
+            <Icon
+              style={[
+                styles.icon,
+                {
+                  marginBottom: Spacing.XS,
+                },
+              ]}
+              source={icon}
+              color={color}
+            />
+          )}
+          {(renderIcon || !!icon) && showDot && (
+            <BadgeDot style={dotStyle} size={dotSize} />
+          )}
+          {(renderIcon || !!icon) && !showDot && badgeValue && (
+            <Badge label={badgeValue} style={styles.badge} />
+          )}
         </View>
-      )}
-      <Text
-        style={styles.textCenter}
-        numberOfLines={1}
-        color={color}
-        typography={typography}>
-        {title}
-      </Text>
-    </TouchableOpacity>
-  );
+        <Text numberOfLines={1} typography={typography} color={color}>
+          {title}
+        </Text>
+      </TouchableOpacity>
+    );
+  };
+
+  return direction === 'row' ? renderRowItem() : renderColumnItem();
 };
 
 export default TabItem;

package/types.ts

@@ -1,5 +1,6 @@
 import {ReactElement} from 'react';
 import {PagerViewProps} from 'react-native-pager-view';
+import {Animated} from 'react-native';
 
 export type Tab = {
   /**
@@ -12,10 +13,7 @@ export type Tab = {
    */
   icon?: string;
 
-  /**
-   * Optional. Specifies the layout direction for the tab's content, either in a row or column format.
-   */
-  direction?: 'row' | 'column';
+  renderIcon?: (active: boolean) => ReactElement;
 
   /**
    * The main component or content to be displayed when this tab is active.
@@ -31,6 +29,10 @@ export type Tab = {
    * Optional. Specifies the size of the dot indicator, either 'small' or 'large'.
    */
   dotSize?: 'small' | 'large';
+
+  badgeValue?: string | number;
+
+  accessibilityLabel?: string;
 };
 
 export type TabItemProps = {
@@ -53,6 +55,15 @@ export type TabItemProps = {
    * Optional. Specifies the width of the tab item. Useful for customizing layout and appearance.
    */
   width?: number;
+
+  /**
+   * Optional. Specifies the layout direction for the tab's content, either in a row or column format.
+   */
+  direction?: 'row' | 'column';
+
+  selectedColor?: string;
+
+  unselectedColor?: string;
 };
 
 export type TabViewProps = {
@@ -85,6 +96,15 @@ export type TabViewProps = {
    * Optional. Additional properties to pass to the underlying pager view component.
    */
   pagerProps?: PagerViewProps;
+
+  /**
+   * Optional. Specifies the layout direction for the tab's content, either in a row or column format.
+   */
+  direction?: 'row' | 'column';
+
+  selectedColor?: string;
+
+  unselectedColor?: string;
 };
 
 /**
@@ -114,5 +134,18 @@ export type TabBarProps = {
   /**
    * Represents the horizontal scroll position in a scrollable tab bar.
    */
-  scrollX: number;
+  scrollX: Animated.Value;
+
+  /**
+   * Optional. Specifies the layout direction for the tab's content, either in a row or column format.
+   */
+  direction?: 'row' | 'column';
+
+  selectedColor?: string;
+
+  unselectedColor?: string;
+};
+
+export type TabViewRef = {
+  goToPage: (page: number) => void;
 };