@hero-design/rn 7.1.3-alpha7 → 7.2.1

package/lib/index.js

@@ -1214,6 +1214,21 @@ function prefixer(element, index, children, callback) {
   }
 }
 
+var weakMemoize = function weakMemoize(func) {
+  // $FlowFixMe flow doesn't include all non-primitive types as allowed for weakmaps
+  var cache = new WeakMap();
+  return function (arg) {
+    if (cache.has(arg)) {
+      // $FlowFixMe
+      return cache.get(arg);
+    }
+
+    var ret = func(arg);
+    cache.set(arg, ret);
+    return ret;
+  };
+};
+
 var identifierWithPointTracking = function identifierWithPointTracking(begin, points, index) {
   var previous = 0;
   var character = 0;
@@ -1451,21 +1466,6 @@ function _extends$1() {
   return _extends$1.apply(this, arguments);
 }
 
-var weakMemoize = function weakMemoize(func) {
-  // $FlowFixMe flow doesn't include all non-primitive types as allowed for weakmaps
-  var cache = new WeakMap();
-  return function (arg) {
-    if (cache.has(arg)) {
-      // $FlowFixMe
-      return cache.get(arg);
-    }
-
-    var ret = func(arg);
-    cache.set(arg, ret);
-    return ret;
-  };
-};
-
 var EmotionCacheContext = /* #__PURE__ */React.createContext( // we're doing this to avoid preconstruct's dead code elimination in this one case
 // because this module is primarily intended for the browser and node
 // but it's also required in react native and similar environments sometimes
@@ -1512,6 +1512,17 @@ var ThemeProvider = function ThemeProvider(props) {
   }, props.children);
 };
 
+var BASE_BORDER_WIDTH = 1;
+var BASE_SPACE = 8;
+var BASE_FONT = 'BeVietnamPro';
+var BASE_FONT_SIZE = 10;
+var scale$1 = {
+  borderWidth: BASE_BORDER_WIDTH,
+  space: BASE_SPACE,
+  font: BASE_FONT,
+  fontSize: BASE_FONT_SIZE
+};
+
 var palette = {
   black: '#000000',
   blue: '#1dbeee',
@@ -1579,6 +1590,7 @@ var palette = {
   smaltDark75: '#000d20',
   smaltLight30: '#4d72a6',
   smaltLight45: '#7390b9',
+  smaltLight75: '#bfcddf',
   smaltLight90: '#e6ebf2',
   violet: '#7622d7',
   violetDark15: '#641db7',
@@ -1637,60 +1649,94 @@ var scale = function scale(size) {
   return size + (horizontalScale(size) - size) * factor;
 };
 
-var BASE$1 = 8;
-var space = {
-  xxsmall: scale(BASE$1 * 0.25),
-  xsmall: scale(BASE$1 * 0.5),
-  small: scale(BASE$1),
-  medium: scale(BASE$1 * 2),
-  large: scale(BASE$1 * 3),
-  xlarge: scale(BASE$1 * 4),
-  xxlarge: scale(BASE$1 * 5),
-  xxxlarge: scale(BASE$1 * 6),
-  xxxxlarge: scale(BASE$1 * 7)
+// https://www.ibm.com/design/language/typography/type-specs-ui#scales
+
+var genFontSize = function genFontSize(prev, at) {
+  return prev + Math.floor(Math.abs((at - 2) / 4) + 1) * 2;
+};
+
+var getFonts = function getFonts(baseFont) {
+  return {
+    light: "".concat(baseFont, "-Light"),
+    regular: "".concat(baseFont, "-Regular"),
+    semiBold: "".concat(baseFont, "-SemiBold")
+  };
 };
 
-var BASE = 16;
-var fonts = {
-  light: 'BeVietnamPro-Light',
-  regular: 'BeVietnamPro-Regular',
-  semiBold: 'BeVietnamPro-SemiBold'
+var getFontSizes = function getFontSizes(baseFontSize) {
+  var fontSizes = Array.from(new Array(9));
+  fontSizes.forEach(function (_, index) {
+    if (index === 0) {
+      fontSizes[0] = baseFontSize;
+    } else {
+      fontSizes[index] = genFontSize(fontSizes[index - 1], index);
+    }
+
+    return undefined;
+  });
+  return {
+    xxxxxlarge: scale(fontSizes[8]),
+    xxxxlarge: scale(fontSizes[7]),
+    xxxlarge: scale(fontSizes[6]),
+    xxlarge: scale(fontSizes[5]),
+    xlarge: scale(fontSizes[4]),
+    large: scale(fontSizes[3]),
+    medium: scale(fontSizes[2]),
+    small: scale(fontSizes[1]),
+    xsmall: scale(fontSizes[0]) //     10
+
+  };
 };
-var fontSizes = {
-  xxxxxlarge: scale(BASE * 2),
-  xxxxlarge: scale(BASE * 1.75),
-  xxxlarge: scale(BASE * 1.5),
-  xxlarge: scale(BASE * 1.25),
-  xlarge: scale(BASE * 1.125),
-  large: scale(BASE),
-  medium: scale(BASE * 0.875),
-  small: scale(BASE * 0.75),
-  xsmall: scale(BASE * 0.625) //      10
 
+var getLineHeights = function getLineHeights(fontSizes) {
+  var additionalSpace = 8;
+  return {
+    xxxxxlarge: fontSizes.xxxxxlarge + additionalSpace,
+    xxxxlarge: fontSizes.xxxxlarge + additionalSpace,
+    xxxlarge: fontSizes.xxxlarge + additionalSpace,
+    xxlarge: fontSizes.xxlarge + additionalSpace,
+    xlarge: fontSizes.xlarge + additionalSpace,
+    large: fontSizes.large + additionalSpace,
+    medium: fontSizes.medium + additionalSpace,
+    small: fontSizes.small + additionalSpace,
+    xsmall: fontSizes.xsmall + additionalSpace
+  };
 };
-var lineHeights = {
-  xxxxxlarge: fontSizes.xxxxxlarge + 8,
-  xxxxlarge: fontSizes.xxxxlarge + 8,
-  xxxlarge: fontSizes.xxxlarge + 8,
-  xxlarge: fontSizes.xxlarge + 8,
-  xlarge: fontSizes.xlarge + 8,
-  large: fontSizes.large + 8,
-  medium: fontSizes.medium + 8,
-  small: fontSizes.small + 8,
-  xsmall: fontSizes.xsmall + 8
+
+var getSpace = function getSpace(baseSpace) {
+  return {
+    xxsmall: scale(baseSpace * 0.25),
+    xsmall: scale(baseSpace * 0.5),
+    small: scale(baseSpace),
+    medium: scale(baseSpace * 2),
+    large: scale(baseSpace * 3),
+    xlarge: scale(baseSpace * 4),
+    xxlarge: scale(baseSpace * 5),
+    xxxlarge: scale(baseSpace * 6),
+    xxxxlarge: scale(baseSpace * 7)
+  };
 };
 
-var borderWidths = {
-  base: 1
+var getBorderWidths = function getBorderWidths(baseBorderWidth) {
+  return {
+    base: baseBorderWidth
+  };
 };
 
-var globalTheme = {
-  colors: _objectSpread2({}, systemPalette),
-  space: space,
-  fonts: fonts,
-  fontSizes: fontSizes,
-  lineHeights: lineHeights,
-  borderWidths: borderWidths
+var getGlobalTheme = function getGlobalTheme(scale, systemPalette) {
+  var fonts = getFonts(scale.font);
+  var fontSizes = getFontSizes(scale.fontSize);
+  var lineHeights = getLineHeights(fontSizes);
+  var borderWidths = getBorderWidths(scale.borderWidth);
+  var space = getSpace(scale.space);
+  return {
+    colors: _objectSpread2({}, systemPalette),
+    fonts: fonts,
+    fontSizes: fontSizes,
+    lineHeights: lineHeights,
+    borderWidths: borderWidths,
+    space: space
+  };
 };
 
 var getBadgeTheme = function getBadgeTheme(theme) {
@@ -1916,17 +1962,19 @@ var getFABTheme = function getFABTheme(theme) {
 };
 
 var getTheme = function getTheme() {
-  var theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : globalTheme;
-  return _objectSpread2(_objectSpread2({}, theme), {}, {
+  var scale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : scale$1;
+  var systemPallete = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : systemPalette;
+  var globalTheme = getGlobalTheme(scale, systemPallete);
+  return _objectSpread2(_objectSpread2({}, globalTheme), {}, {
     __hd__: {
-      badge: getBadgeTheme(theme),
-      bottomNavigation: getBottomNavigationTheme(theme),
-      card: getCardTheme(theme),
-      divider: getDividerTheme(theme),
-      icon: getIconTheme(theme),
-      tabs: getTabsTheme(theme),
-      typography: getTypographyTheme(theme),
-      fab: getFABTheme(theme)
+      badge: getBadgeTheme(globalTheme),
+      bottomNavigation: getBottomNavigationTheme(globalTheme),
+      card: getCardTheme(globalTheme),
+      divider: getDividerTheme(globalTheme),
+      icon: getIconTheme(globalTheme),
+      tabs: getTabsTheme(globalTheme),
+      typography: getTypographyTheme(globalTheme),
+      fab: getFABTheme(globalTheme)
     }
   });
 };
@@ -13666,7 +13714,7 @@ var StyledBottomBarText = index$1(Typography.Text)(function (_ref3) {
 var isIOS = reactNative.Platform.OS === 'ios';
 reactNative.Platform.OS === 'android';
 
-var _excluded$3 = ["onChange", "renderActiveTabOnly", "selectedTabKey", "tabs"];
+var _excluded$3 = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
 
 var getInactiveIcon = function getInactiveIcon(icon) {
   var inactiveIcon = "".concat(icon, "-outlined");
@@ -13674,7 +13722,7 @@ var getInactiveIcon = function getInactiveIcon(icon) {
 };
 
 var BottomNavigation = function BottomNavigation(_ref) {
-  var onChange = _ref.onChange,
+  var onTabPress = _ref.onTabPress,
       _ref$renderActiveTabO = _ref.renderActiveTabOnly,
       renderActiveTabOnly = _ref$renderActiveTabO === void 0 ? false : _ref$renderActiveTabO,
       selectedTabKey = _ref.selectedTabKey,
@@ -13700,7 +13748,8 @@ var BottomNavigation = function BottomNavigation(_ref) {
 
   return /*#__PURE__*/React__default["default"].createElement(BottomNavigationContainer, nativeProps, /*#__PURE__*/React__default["default"].createElement(ContentWrapper$1, null, tabs.map(function (tab) {
     var key = tab.key,
-        component = tab.component;
+        component = tab.component,
+        testID = tab.testID;
     var active = selectedTabKey === key;
 
     if (renderActiveTabOnly && !active) {
@@ -13714,7 +13763,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
 
     return /*#__PURE__*/React__default["default"].createElement(BottomNavigationTab, {
       key: key,
-      testID: "route-screen-".concat(selectedTabKey),
+      testID: testID ? "route-screen-".concat(testID) : undefined,
       pointerEvents: active ? 'auto' : 'none',
       accessibilityElementsHidden: !active,
       importantForAccessibility: active ? 'auto' : 'no-hide-descendants',
@@ -13736,9 +13785,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
     return /*#__PURE__*/React__default["default"].createElement(reactNative.TouchableWithoutFeedback, {
       key: key,
       onPress: function onPress() {
-        if (key !== selectedTabKey) {
-          onChange(key);
-        }
+        return onTabPress(key);
       },
       testID: testID
     }, /*#__PURE__*/React__default["default"].createElement(BottomBarItem, null, /*#__PURE__*/React__default["default"].createElement(Icon, {
@@ -14111,10 +14158,10 @@ var StyledHeaderTabText = index$1(Typography.Text)(function (_ref6) {
   };
 });
 
-var _excluded = ["onChange", "renderActiveTabOnly", "selectedTabKey", "tabs"];
+var _excluded = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
 
 var Tabs = function Tabs(_ref) {
-  var onChange = _ref.onChange,
+  var onTabPress = _ref.onTabPress,
       _ref$renderActiveTabO = _ref.renderActiveTabOnly,
       renderActiveTabOnly = _ref$renderActiveTabO === void 0 ? false : _ref$renderActiveTabO,
       selectedTabKey = _ref.selectedTabKey,
@@ -14132,6 +14179,21 @@ var Tabs = function Tabs(_ref) {
       loaded = _React$useState2[0],
       setLoaded = _React$useState2[1];
 
+  React__default["default"].useEffect(function () {
+    var selectedTabIndex = tabs.findIndex(function (item) {
+      return item.key === selectedTabKey;
+    });
+
+    if (selectedTabIndex !== -1) {
+      var _flatListRef$current;
+
+      (_flatListRef$current = flatListRef.current) === null || _flatListRef$current === void 0 ? void 0 : _flatListRef$current.scrollToIndex({
+        index: selectedTabIndex,
+        viewPosition: 0.5
+      });
+    }
+  }, [selectedTabKey, tabs]);
+
   if (!loaded.includes(selectedTabKey)) {
     // Set the current tab to be loaded if it was not loaded before
     setLoaded(function (loadedState) {
@@ -14152,17 +14214,16 @@ var Tabs = function Tabs(_ref) {
     onScrollToIndexFailed: function onScrollToIndexFailed(_ref2) {
       var index = _ref2.index;
       setTimeout(function () {
-        var _flatListRef$current;
+        var _flatListRef$current2;
 
-        return (_flatListRef$current = flatListRef.current) === null || _flatListRef$current === void 0 ? void 0 : _flatListRef$current.scrollToIndex({
+        return (_flatListRef$current2 = flatListRef.current) === null || _flatListRef$current2 === void 0 ? void 0 : _flatListRef$current2.scrollToIndex({
           index: index,
           viewPosition: 0.5
         });
       }, 100);
     },
     renderItem: function renderItem(_ref3) {
-      var tab = _ref3.item,
-          index = _ref3.index;
+      var tab = _ref3.item;
       var key = tab.key,
           icon = tab.icon,
           title = tab.title,
@@ -14171,15 +14232,7 @@ var Tabs = function Tabs(_ref) {
       return /*#__PURE__*/React__default["default"].createElement(reactNative.TouchableOpacity, {
         key: key,
         onPress: function onPress() {
-          if (key !== selectedTabKey) {
-            var _flatListRef$current2;
-
-            onChange(key);
-            (_flatListRef$current2 = flatListRef.current) === null || _flatListRef$current2 === void 0 ? void 0 : _flatListRef$current2.scrollToIndex({
-              index: index,
-              viewPosition: 0.5
-            });
-          }
+          return onTabPress(key);
         },
         testID: testID
       }, /*#__PURE__*/React__default["default"].createElement(HeaderTabItem, null, /*#__PURE__*/React__default["default"].createElement(StyledHeaderTabIcon, {
@@ -14194,7 +14247,8 @@ var Tabs = function Tabs(_ref) {
     }
   })), /*#__PURE__*/React__default["default"].createElement(ContentWrapper, null, tabs.map(function (tab) {
     var key = tab.key,
-        component = tab.component;
+        component = tab.component,
+        testID = tab.testID;
     var active = selectedTabKey === key;
 
     if (renderActiveTabOnly && !active) {
@@ -14208,7 +14262,7 @@ var Tabs = function Tabs(_ref) {
 
     return /*#__PURE__*/React__default["default"].createElement(TabScreen, {
       key: key,
-      testID: "tab-screen-".concat(selectedTabKey),
+      testID: testID ? "tab-screen-".concat(testID) : undefined,
       pointerEvents: active ? 'auto' : 'none',
       accessibilityElementsHidden: !active,
       importantForAccessibility: active ? 'auto' : 'no-hide-descendants',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.1.3-alpha7",
+  "version": "7.2.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -20,7 +20,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "7.1.2"
+    "@hero-design/colors": "7.2.1"
   },
   "peerDependencies": {
     "react": "17.0.2",
@@ -70,41 +70,5 @@
     "rollup-plugin-copy": "^3.4.0",
     "ts-jest": "^27.0.7",
     "typescript": "^4.5.5"
-  },
-  "nx": {
-    "targets": {
-      "type-check": {
-        "dependsOn": [
-          {
-            "target": "build:types",
-            "projects": "dependencies"
-          }
-        ]
-      },
-      "lint": {
-        "dependsOn": [
-          {
-            "target": "build:js",
-            "projects": "dependencies"
-          }
-        ]
-      },
-      "test:ci": {
-        "dependsOn": [
-          {
-            "target": "build",
-            "projects": "dependencies"
-          }
-        ]
-      },
-      "dev": {
-        "dependsOn": [
-          {
-            "target": "build",
-            "projects": "dependencies"
-          }
-        ]
-      }
-    }
   }
 }

package/playground/components/BottomNavigation.tsx

@@ -62,7 +62,7 @@ const BottomNavigationPlayground = () => {
 
   return (
     <BottomNavigation
-      onChange={newTabKey => setSelectedTabKey(newTabKey)}
+      onTabPress={newTabKey => setSelectedTabKey(newTabKey)}
       selectedTabKey={selectedTabKey}
       tabs={tabs}
     />

package/playground/components/Card.tsx

@@ -6,7 +6,7 @@ import {
   TouchableOpacity,
   ScrollView,
 } from 'react-native';
-import { palette } from '@hero-design/colors';
+import palette from '@hero-design/colors';
 import {
   scale,
   Card,

package/playground/components/Tabs.tsx

@@ -34,7 +34,7 @@ const TabsPlayground = () => {
 
   return (
     <Tabs
-      onChange={newTabKey => setSelectedTabKey(newTabKey)}
+      onTabPress={newTabKey => setSelectedTabKey(newTabKey)}
       selectedTabKey={selectedTabKey}
       tabs={tabs}
     />

package/playground/index.tsx

@@ -6,8 +6,15 @@ import {
   NativeStackScreenProps,
 } from '@react-navigation/native-stack';
 import { useFonts } from 'expo-font';
-import { SafeAreaView, FlatList } from 'react-native';
-import { ThemeProvider, theme, useTheme, Typography } from '../src/index';
+import { SafeAreaView, FlatList, View, TouchableOpacity } from 'react-native';
+import {
+  ThemeProvider,
+  theme,
+  useTheme,
+  Typography,
+  Icon,
+  Divider,
+} from '../src/index';
 import BadgePlayground from './components/Badge';
 import BottomNavigation from './components/BottomNavigation';
 import Button from './components/Button';
@@ -52,44 +59,45 @@ const components = [
   { name: 'Typography', component: TypographyPlayground },
 ] as const;
 
-const ComponentItem = ({
-  name,
-  onPress,
-}: {
-  name: string;
-  onPress: () => void;
-}) => {
+const ComponentItem = ({ name }: { name: string }) => {
   const hdTheme = useTheme();
   return (
-    <Typography.Text
-      fontSize="large"
-      onPress={onPress}
+    <View
       style={{
-        marginTop: hdTheme.space.medium,
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginHorizontal: hdTheme.space.medium,
+        marginVertical: hdTheme.space.medium,
       }}
     >
-      {name}
-    </Typography.Text>
-  );
-};
-
-const ComponentList = ({ navigation }: Navigation) => {
-  const hdTheme = useTheme();
-  return (
-    <SafeAreaView style={{ marginHorizontal: hdTheme.space.large }}>
-      <FlatList
-        data={components}
-        renderItem={({ item }) => (
-          <ComponentItem
-            name={item.name}
-            onPress={() => navigation.navigate(item.name)}
-          />
-        )}
+      <Typography.Text fontSize="large">{name}</Typography.Text>
+      <Icon
+        icon="arrow-right"
+        size="small"
+        style={{ color: hdTheme.colors.disabledText }}
       />
-    </SafeAreaView>
+    </View>
   );
 };
 
+const ComponentList = ({ navigation }: Navigation) => (
+  <SafeAreaView>
+    <FlatList
+      data={components}
+      renderItem={({ item }) => (
+        <>
+          <TouchableOpacity onPress={() => navigation.navigate(item.name)}>
+            <ComponentItem name={item.name} />
+          </TouchableOpacity>
+          <Divider marginHorizontal="small" />
+        </>
+      )}
+    />
+  </SafeAreaView>
+);
+
 const App = () => {
   const CustomNavigationTheme = {
     ...DefaultTheme,

package/src/components/BottomNavigation/__tests__/__snapshots__/index.spec.tsx.snap

@@ -48,7 +48,6 @@ exports[`BottomNavigation renders correctly 1`] = `
             undefined,
           ]
         }
-        testID="route-screen-home"
         themeVisibility={true}
       >
         <Text>

package/src/components/BottomNavigation/__tests__/index.spec.tsx

@@ -8,7 +8,7 @@ import BottomNavigation, { BottomNavigationTabType } from '..';
 const TestComponent = (
   props: Omit<
     ComponentProps<typeof BottomNavigation>,
-    'selectedTabKey' | 'onChange' | 'tabs'
+    'selectedTabKey' | 'onTabPress' | 'tabs'
   >
 ) => {
   const [selectedTabKey, setSelectedTabKey] = React.useState('home');
@@ -50,7 +50,7 @@ const TestComponent = (
         {...props}
         tabs={tabs}
         selectedTabKey={selectedTabKey}
-        onChange={newTabKey => setSelectedTabKey(newTabKey)}
+        onTabPress={newTabKey => setSelectedTabKey(newTabKey)}
       />
     </SafeAreaProvider>
   );

package/src/components/BottomNavigation/index.tsx

@@ -29,9 +29,9 @@ export type BottomNavigationTabType = {
 
 interface BottomNavigationProps extends ViewProps {
   /**
-   * Callback which is called on tab change, receiving id of upcoming active Tab.
+   * Callback which is called on tab press, receiving key of upcoming active Tab.
    */
-  onChange: (key: string) => void;
+  onTabPress: (key: string) => void;
   /**
    * Whether inactive tabs should be removed and unmounted in React.
    * Defaults to `false`.
@@ -67,7 +67,7 @@ const getInactiveIcon = (icon: IconName): IconName => {
 };
 
 const BottomNavigation = ({
-  onChange,
+  onTabPress,
   renderActiveTabOnly = false,
   selectedTabKey,
   tabs,
@@ -89,7 +89,7 @@ const BottomNavigation = ({
     <BottomNavigationContainer {...nativeProps}>
       <ContentWrapper>
         {tabs.map(tab => {
-          const { key, component } = tab;
+          const { key, component, testID } = tab;
           const active = selectedTabKey === key;
 
           if (renderActiveTabOnly && !active) {
@@ -104,7 +104,7 @@ const BottomNavigation = ({
           return (
             <BottomNavigationTab
               key={key}
-              testID={`route-screen-${selectedTabKey}`}
+              testID={testID ? `route-screen-${testID}` : undefined}
               pointerEvents={active ? 'auto' : 'none'}
               accessibilityElementsHidden={!active}
               importantForAccessibility={
@@ -133,11 +133,7 @@ const BottomNavigation = ({
             return (
               <TouchableWithoutFeedback
                 key={key}
-                onPress={() => {
-                  if (key !== selectedTabKey) {
-                    onChange(key);
-                  }
-                }}
+                onPress={() => onTabPress(key)}
                 testID={testID}
               >
                 <BottomBarItem>

package/src/components/FAB/ActionGroup/index.tsx

@@ -25,7 +25,7 @@ const ActionItemsListComponent = ({
 );
 
 export interface ActionGroupProps {
-  /*
+  /**
    * Title of the action group header.
    */
   headerTitle?: string;
@@ -37,7 +37,6 @@ export interface ActionGroupProps {
    * Specify if the FAB button is in active state and the action group is shown.
    * */
   active?: boolean;
-
   /**
    * Additional style.
    */

package/src/components/Tabs/__tests__/__snapshots__/index.spec.tsx.snap

@@ -309,7 +309,6 @@ exports[`Tabs renders correctly 1`] = `
             undefined,
           ]
         }
-        testID="tab-screen-work"
         themeVisibility={true}
       >
         <Text>

package/src/components/Tabs/__tests__/index.spec.tsx

@@ -8,7 +8,7 @@ import Tabs, { TabType } from '..';
 const TestTabsComponent = (
   props: Omit<
     ComponentProps<typeof Tabs>,
-    'selectedTabKey' | 'onChange' | 'tabs'
+    'selectedTabKey' | 'onTabPress' | 'tabs'
   >
 ) => {
   const [selectedTabKey, setSelectedTabKey] = React.useState('work');
@@ -38,7 +38,7 @@ const TestTabsComponent = (
         {...props}
         tabs={tabs}
         selectedTabKey={selectedTabKey}
-        onChange={newTabKey => setSelectedTabKey(newTabKey)}
+        onTabPress={newTabKey => setSelectedTabKey(newTabKey)}
       />
     </SafeAreaProvider>
   );