@hero-design/rn 8.12.4 → 8.12.5-alpha.1

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
-@hero-design/rn:build: cache hit, replaying output c1ce0a6dbcd003d9
-@hero-design/rn:build: $ yarn build:js && yarn build:types
-@hero-design/rn:build: $ rollup -c
-@hero-design/rn:build: 
-@hero-design/rn:build: src/index.ts → lib/index.js, es/index.js...
-@hero-design/rn:build: (!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
-@hero-design/rn:build: (!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/root/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
-@hero-design/rn:build: created lib/index.js, es/index.js in 26.9s
-@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json
+@hero-design/rn:build: cache hit, replaying output f482b851404033d4
+@hero-design/rn:build: $ yarn build:js && yarn build:types
+@hero-design/rn:build: $ rollup -c
+@hero-design/rn:build: 
+@hero-design/rn:build: src/index.ts → lib/index.js, es/index.js...
+@hero-design/rn:build: (!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
+@hero-design/rn:build: (!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/Volumes/Data/Projects/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
+@hero-design/rn:build: created lib/index.js, es/index.js in 30s
+@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/.turbo/turbo-build:types.log

@@ -0,0 +1,2 @@
+@hero-design/rn:build:types: cache hit, replaying output 469c355cf5f8f229
+@hero-design/rn:build:types: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/.turbo/turbo-lint.log

@@ -0,0 +1,149 @@
+@hero-design/rn:lint: cache hit, replaying output 6363842493954154
+@hero-design/rn:lint: $ eslint src --ext .js,.jsx,.ts,.tsx --ignore-path ../../.gitignore
+@hero-design/rn:lint: 
+@hero-design/rn:lint: /Volumes/Data/Projects/hero-design/packages/rn/src/components/BottomSheet/ScrollView.tsx
+@hero-design/rn:lint:   25:5  warning  React Hook useCallback has missing dependencies: 'props' and 'setInternalShowDivider'. Either include them or remove the dependency array. However, 'props' will change when *any* prop changes, so the preferred fix is to destructure the 'props' object outside of the useCallback call and refer to those specific props inside useCallback  react-hooks/exhaustive-deps
+@hero-design/rn:lint:   34:5  warning  React Hook useCallback has missing dependencies: 'props' and 'setInternalShowDivider'. Either include them or remove the dependency array. However, 'props' will change when *any* prop changes, so the preferred fix is to destructure the 'props' object outside of the useCallback call and refer to those specific props inside useCallback  react-hooks/exhaustive-deps
+@hero-design/rn:lint:   43:5  warning  React Hook useCallback has missing dependencies: 'props' and 'setInternalShowDivider'. Either include them or remove the dependency array. However, 'props' will change when *any* prop changes, so the preferred fix is to destructure the 'props' object outside of the useCallback call and refer to those specific props inside useCallback  react-hooks/exhaustive-deps
+@hero-design/rn:lint: 
+@hero-design/rn:lint: /Volumes/Data/Projects/hero-design/packages/rn/src/components/BottomSheet/index.tsx
+@hero-design/rn:lint:   123:32  warning  The ref value 'animatedValue.current' will likely have changed by the time this effect cleanup function runs. If this ref points to a node rendered by React, copy 'animatedValue.current' to a variable inside the effect, and use that variable in the cleanup function  react-hooks/exhaustive-deps
+@hero-design/rn:lint:   124:6   warning  React Hook useEffect has missing dependencies: 'onDismiss' and 'visible'. Either include them or remove the dependency array. If 'onDismiss' changes too often, find the parent component that defines it and wrap that definition in useCallback                          react-hooks/exhaustive-deps
+@hero-design/rn:lint:   137:6   warning  React Hook useEffect has a missing dependency: 'onAnimationEnd'. Either include it or remove the dependency array                                                                                                                                                          react-hooks/exhaustive-deps
+@hero-design/rn:lint: 
+@hero-design/rn:lint: /Volumes/Data/Projects/hero-design/packages/rn/src/components/Button/LoadingIndicator/index.tsx
+@hero-design/rn:lint:   118:36  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+@hero-design/rn:lint: 
+@hero-design/rn:lint: /Volumes/Data/Projects/hero-design/packages/rn/src/components/Carousel/CardCarousel.tsx
+@hero-design/rn:lint:   105:7  warning  React Hook useCallback has a missing dependency: 'items.length'. Either include it or remove the dependency array    react-hooks/exhaustive-deps
+@hero-design/rn:lint:   121:8  warning  React Hook useCallback has an unnecessary dependency: 'itemWidth'. Either exclude it or remove the dependency array  react-hooks/exhaustive-deps
+@hero-design/rn:lint: 
+@hero-design/rn:lint: /Volumes/Data/Projects/hero-design/packages/rn/src/components/Carousel/__tests__/CardCarousel.spec.tsx
+@hero-design/rn:lint:   47:27  warning  Forbidden non-null assertion  @typescript-eslint/no-non-null-assertion
+@hero-design/rn:lint:   47:27  warning  Forbidden non-null assertion  @typescript-eslint/no-non-null-assertion
+@hero-design/rn:lint:   93:27  warning  Forbidden non-null assertion  @typescript-eslint/no-non-null-assertion
+@hero-design/rn:lint:   93:27  warning  Forbidden non-null assertion  @typescript-eslint/no-non-null-assertion
+@hero-design/rn:lint: 
+@hero-design/rn:lint: /Volumes/Data/Projects/hero-design/packages/rn/src/components/Carousel/index.tsx
+@hero-design/rn:lint:   108:6  warning  React Hook useEffect has missing dependencies: 'scrollX' and 'width'. Either include them or remove the dependency array        react-hooks/exhaustive-deps
+@hero-design/rn:lint:   114:6  warning  React Hook useCallback has a missing dependency: 'internalOnItemIndexChange'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
+@hero-design/rn:lint: 
+@hero-design/rn:lint: /Volumes/Data/Projects/hero-design/packages/rn/src/components/Collapse/index.tsx
+@hero-design/rn:lint:   48:6  warning  React Hook useEffect has a missing dependency: 'collapseAnim'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
+@hero-design/rn:lint: 
+@hero-design/rn:lint: /Volumes/Data/Projects/hero-design/packages/rn/src/components/DatePicker/DatePickerAndroid.tsx
+@hero-design/rn:lint:   53:25  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+@hero-design/rn:lint: 
+@hero-design/rn:lint: /Volumes/Data/Projects/hero-design/packages/rn/src/components/DatePicker/DatePickerIOS.tsx
+@hero-design/rn:lint:   75:27  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+@hero-design/rn:lint: 
+@hero-design/rn:lint: /Volumes/Data/Projects/hero-design/packages/rn/src/components/Drawer/DragableDrawer/index.tsx
+@hero-design/rn:lint:    78:6  warning  React Hook useEffect has a missing dependency: 'pan'. Either include it or remove the dependency array                                                                                                                                                                                                react-hooks/exhaustive-deps
+@hero-design/rn:lint:    88:6  warning  React Hook useEffect has missing dependencies: 'initialHeightPercentage' and 'minimumHeightPercentage'. Either include them or remove the dependency array                                                                                                                                            react-hooks/exhaustive-deps
+@hero-design/rn:lint:   104:6  warning  React Hook useEffect has missing dependencies: 'pan' and 'snapPoints'. Either include them or remove the dependency array                                                                                                                                                                             react-hooks/exhaustive-deps
+@hero-design/rn:lint:   127:6  warning  React Hook useEffect has missing dependencies: 'height', 'minimumHeightPercentage', 'onCollapsed', 'onExpanded', and 'pan'. Either include them or remove the dependency array. If 'onExpanded' changes too often, find the parent component that defines it and wrap that definition in useCallback  react-hooks/exhaustive-deps
+@hero-design/rn:lint: 
+@hero-design/rn:lint: /Volumes/Data/Projects/hero-design/packages/rn/src/components/Drawer/index.tsx
+@hero-design/rn:lint:   69:6  warning  React Hook useEffect has a missing dependency: 'animatedValue'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
+@hero-design/rn:lint: 
+@hero-design/rn:lint: /Volumes/Data/Projects/hero-design/packages/rn/src/components/Icon/utils.ts
+@hero-design/rn:lint:   3:24  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+@hero-design/rn:lint: 
+@hero-design/rn:lint: /Volumes/Data/Projects/hero-design/packages/rn/src/components/PageControl/index.tsx
+@hero-design/rn:lint:   40:6  warning  React Hook React.useEffect has a missing dependency: 'animatedValue'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
+@hero-design/rn:lint: 
+@hero-design/rn:lint: /Volumes/Data/Projects/hero-design/packages/rn/src/components/PinInput/index.tsx
+@hero-design/rn:lint:   114:6  warning  React Hook useCallback has missing dependencies: 'length', 'onChangeText', and 'onFulfill'. Either include them or remove the dependency array. If 'onChangeText' changes too often, find the parent component that defines it and wrap that definition in useCallback  react-hooks/exhaustive-deps
+@hero-design/rn:lint:   121:6  warning  React Hook useEffect has missing dependencies: 'autoFocus' and 'focus'. Either include them or remove the dependency array                                                                                                                                              react-hooks/exhaustive-deps
+@hero-design/rn:lint: 
+@hero-design/rn:lint: /Volumes/Data/Projects/hero-design/packages/rn/src/components/RichTextEditor/EditorToolbar.tsx
+@hero-design/rn:lint:   147:6  warning  React Hook useEffect has a missing dependency: 'normalizeEventName'. Either include it or remove the dependency array                            react-hooks/exhaustive-deps
+@hero-design/rn:lint:   208:5  warning  React Hook useMemo has missing dependencies: 'normalizeEventName' and 'toggleToolbarButton'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
+@hero-design/rn:lint: 
+@hero-design/rn:lint: /Volumes/Data/Projects/hero-design/packages/rn/src/components/RichTextEditor/MentionList.tsx
+@hero-design/rn:lint:   63:6  warning  React Hook useEffect has a missing dependency: 'normalizeEventName'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
+@hero-design/rn:lint: 
+@hero-design/rn:lint: /Volumes/Data/Projects/hero-design/packages/rn/src/components/RichTextEditor/RichTextEditor.tsx
+@hero-design/rn:lint:    50:13  warning  Unexpected any. Specify a different type                                                                                                                                                                                                                                                                          @typescript-eslint/no-explicit-any
+@hero-design/rn:lint:   145:6   warning  React Hook useMemo has an unnecessary dependency: 'isFocused'. Either exclude it or remove the dependency array                                                                                                                                                                                                   react-hooks/exhaustive-deps
+@hero-design/rn:lint:   171:6   warning  React Hook useEffect has a missing dependency: 'normalizeEventName'. Either include it or remove the dependency array                                                                                                                                                                                             react-hooks/exhaustive-deps
+@hero-design/rn:lint:   207:6   warning  React Hook useMemo has missing dependencies: 'autoFocus', 'placeholder', 'theme.__hd__.richTextEditor.colors.text', 'theme.__hd__.richTextEditor.fontSizes.editor', and 'value'. Either include them or remove the dependency array                                                                               react-hooks/exhaustive-deps
+@hero-design/rn:lint:   244:6   warning  React Hook useEffect has a missing dependency: 'normalizeEventName'. Either include it or remove the dependency array                                                                                                                                                                                             react-hooks/exhaustive-deps
+@hero-design/rn:lint:   246:61  warning  Unexpected any. Specify a different type                                                                                                                                                                                                                                                                          @typescript-eslint/no-explicit-any
+@hero-design/rn:lint:   306:5   warning  React Hook useCallback has missing dependencies: 'handleEditorLayoutEvent', 'normalizeEventName', 'onChange', and 'onCursorChange'. Either include them or remove the dependency array. If 'onCursorChange' changes too often, find the parent component that defines it and wrap that definition in useCallback  react-hooks/exhaustive-deps
+@hero-design/rn:lint: 
+@hero-design/rn:lint: /Volumes/Data/Projects/hero-design/packages/rn/src/components/RichTextEditor/__tests__/MentionList.spec.tsx
+@hero-design/rn:lint:   93:20  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+@hero-design/rn:lint: 
+@hero-design/rn:lint: /Volumes/Data/Projects/hero-design/packages/rn/src/components/RichTextEditor/hero-editor.d.ts
+@hero-design/rn:lint:   7:43  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+@hero-design/rn:lint: 
+@hero-design/rn:lint: /Volumes/Data/Projects/hero-design/packages/rn/src/components/RichTextEditor/utils/rnWebView.ts
+@hero-design/rn:lint:   11:9  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+@hero-design/rn:lint: 
+@hero-design/rn:lint: /Volumes/Data/Projects/hero-design/packages/rn/src/components/Select/MultiSelect/index.tsx
+@hero-design/rn:lint:   86:6  warning  React Hook useEffect has a missing dependency: 'value'. Either include it or remove the dependency array. If 'setSelectingValue' needs the current value of 'value', you can also switch to useReducer instead of useState and read 'value' in the reducer  react-hooks/exhaustive-deps
+@hero-design/rn:lint: 
+@hero-design/rn:lint: /Volumes/Data/Projects/hero-design/packages/rn/src/components/Switch/index.tsx
+@hero-design/rn:lint:   70:6  warning  React Hook useEffect has missing dependencies: 'animatedOffset' and 'offset'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
+@hero-design/rn:lint: 
+@hero-design/rn:lint: /Volumes/Data/Projects/hero-design/packages/rn/src/components/Tabs/ScrollableTabs.tsx
+@hero-design/rn:lint:   117:7  warning  React Hook React.useImperativeHandle has a missing dependency: 'onTabPress'. Either include it or remove the dependency array. If 'onTabPress' changes too often, find the parent component that defines it and wrap that definition in useCallback  react-hooks/exhaustive-deps
+@hero-design/rn:lint:   152:8  warning  React Hook React.useEffect has missing dependencies: 'tabs' and 'tabsAnims'. Either include them or remove the dependency array                                                                                                                      react-hooks/exhaustive-deps
+@hero-design/rn:lint: 
+@hero-design/rn:lint: /Volumes/Data/Projects/hero-design/packages/rn/src/components/Tabs/__tests__/ScrollableTabs.spec.tsx
+@hero-design/rn:lint:   140:27  warning  Forbidden non-null assertion  @typescript-eslint/no-non-null-assertion
+@hero-design/rn:lint:   140:27  warning  Forbidden non-null assertion  @typescript-eslint/no-non-null-assertion
+@hero-design/rn:lint:   141:28  warning  Forbidden non-null assertion  @typescript-eslint/no-non-null-assertion
+@hero-design/rn:lint:   141:28  warning  Forbidden non-null assertion  @typescript-eslint/no-non-null-assertion
+@hero-design/rn:lint: 
+@hero-design/rn:lint: /Volumes/Data/Projects/hero-design/packages/rn/src/components/TextInput/StyledTextInput.tsx
+@hero-design/rn:lint:   33:62  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+@hero-design/rn:lint: 
+@hero-design/rn:lint: /Volumes/Data/Projects/hero-design/packages/rn/src/components/TextInput/__tests__/index.spec.tsx
+@hero-design/rn:lint:   436:34  warning  Forbidden non-null assertion  @typescript-eslint/no-non-null-assertion
+@hero-design/rn:lint: 
+@hero-design/rn:lint: /Volumes/Data/Projects/hero-design/packages/rn/src/components/TimePicker/TimePickerAndroid.tsx
+@hero-design/rn:lint:   51:25  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+@hero-design/rn:lint: 
+@hero-design/rn:lint: /Volumes/Data/Projects/hero-design/packages/rn/src/components/TimePicker/TimePickerIOS.tsx
+@hero-design/rn:lint:   76:27  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+@hero-design/rn:lint: 
+@hero-design/rn:lint: /Volumes/Data/Projects/hero-design/packages/rn/src/components/Toast/Toast.tsx
+@hero-design/rn:lint:   69:6  warning  React Hook useEffect has missing dependencies: 'autoDismiss', 'duration', and 'onDismiss'. Either include them or remove the dependency array. If 'onDismiss' changes too often, find the parent component that defines it and wrap that definition in useCallback  react-hooks/exhaustive-deps
+@hero-design/rn:lint:   80:6  warning  React Hook useEffect has a missing dependency: 'animatedValue'. Either include it or remove the dependency array                                                                                                                                                    react-hooks/exhaustive-deps
+@hero-design/rn:lint: 
+@hero-design/rn:lint: /Volumes/Data/Projects/hero-design/packages/rn/src/components/Toast/__tests__/index.spec.tsx
+@hero-design/rn:lint:   19:10  warning  React Hook useEffect has a missing dependency: 'toast'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
+@hero-design/rn:lint:   82:10  warning  React Hook useEffect has a missing dependency: 'toast'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
+@hero-design/rn:lint: 
+@hero-design/rn:lint: /Volumes/Data/Projects/hero-design/packages/rn/src/theme/components/progress.ts
+@hero-design/rn:lint:   1:10  warning  Importing "mixColor" from "@hero-design/colors" is not recommended. Please use colors from useTheme hook instead  @hero-design/not-recommended-import
+@hero-design/rn:lint: 
+@hero-design/rn:lint: /Volumes/Data/Projects/hero-design/packages/rn/src/theme/global/colors/eBens.ts
+@hero-design/rn:lint:   1:10  warning  Importing "eBensPalette" from "@hero-design/colors" is not recommended. Please use colors from useTheme hook instead  @hero-design/not-recommended-import
+@hero-design/rn:lint: 
+@hero-design/rn:lint: /Volumes/Data/Projects/hero-design/packages/rn/src/theme/global/colors/global.ts
+@hero-design/rn:lint:   1:10  warning  Importing "defaultMobilePalette" from "@hero-design/colors" is not recommended. Please use colors from useTheme hook instead  @hero-design/not-recommended-import
+@hero-design/rn:lint: 
+@hero-design/rn:lint: /Volumes/Data/Projects/hero-design/packages/rn/src/theme/global/colors/jobs.ts
+@hero-design/rn:lint:   1:10  warning  Importing "jobsPalette" from "@hero-design/colors" is not recommended. Please use colors from useTheme hook instead  @hero-design/not-recommended-import
+@hero-design/rn:lint: 
+@hero-design/rn:lint: /Volumes/Data/Projects/hero-design/packages/rn/src/theme/global/colors/swag.ts
+@hero-design/rn:lint:   1:10  warning  Importing "swagPalette" from "@hero-design/colors" is not recommended. Please use colors from useTheme hook instead  @hero-design/not-recommended-import
+@hero-design/rn:lint: 
+@hero-design/rn:lint: /Volumes/Data/Projects/hero-design/packages/rn/src/theme/global/colors/wallet.ts
+@hero-design/rn:lint:   1:10  warning  Importing "walletPalette" from "@hero-design/colors" is not recommended. Please use colors from useTheme hook instead  @hero-design/not-recommended-import
+@hero-design/rn:lint: 
+@hero-design/rn:lint: /Volumes/Data/Projects/hero-design/packages/rn/src/theme/global/colors/work.ts
+@hero-design/rn:lint:   1:10  warning  Importing "workPalette" from "@hero-design/colors" is not recommended. Please use colors from useTheme hook instead  @hero-design/not-recommended-import
+@hero-design/rn:lint: 
+@hero-design/rn:lint: /Volumes/Data/Projects/hero-design/packages/rn/src/utils/__tests__/helpers.spec.ts
+@hero-design/rn:lint:   15:18  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+@hero-design/rn:lint:   37:18  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+@hero-design/rn:lint: 
+@hero-design/rn:lint: /Volumes/Data/Projects/hero-design/packages/rn/src/utils/hooks.ts
+@hero-design/rn:lint:   26:7  warning  Unexpected console statement  no-console
+@hero-design/rn:lint: 
+@hero-design/rn:lint: ✖ 66 problems (0 errors, 66 warnings)
+@hero-design/rn:lint: 

package/.turbo/turbo-publish:npm.log

@@ -0,0 +1,9 @@
+@hero-design/rn:publish:npm: cache hit, replaying output 507c34f3e0a508f6
+@hero-design/rn:publish:npm: $ yarn publish --access public
+@hero-design/rn:publish:npm: [1/4] Bumping version...
+@hero-design/rn:publish:npm: info Current version: 8.12.0-rc.0
+@hero-design/rn:publish:npm: [2/4] Logging in...
+@hero-design/rn:publish:npm: [3/4] Publishing...
+@hero-design/rn:publish:npm: success Published.
+@hero-design/rn:publish:npm: [4/4] Revoking token...
+@hero-design/rn:publish:npm: info Not revoking login token, specified via config file.

package/es/index.js

@@ -14528,8 +14528,9 @@ var getTabItem$1 = function getTabItem(_ref) {
     color: color
   });
 };
-var ScrollableTab = function ScrollableTab(_ref2) {
-  var onTabPress = _ref2.onTabPress,
+var ScrollableTab = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var _ref2$onTabPress = _ref2.onTabPress,
+    onTabPress = _ref2$onTabPress === void 0 ? noop : _ref2$onTabPress,
     selectedTabKey = _ref2.selectedTabKey,
     tabs = _ref2.tabs,
     containerStyle = _ref2.containerStyle,
@@ -14551,20 +14552,46 @@ var ScrollableTab = function ScrollableTab(_ref2) {
   var tabsAnims = useAnimatedValueArray(tabs.map(function (_, i) {
     return i === selectedTabIndex ? 1 : 0;
   }));
+  React.useImperativeHandle(ref, function () {
+    return {
+      selectTabKey: function selectTabKey(tabKey) {
+        var index = tabs.findIndex(function (item) {
+          return item.key === tabKey;
+        });
+        if (index !== -1) {
+          var _flatListRef$current, _pagerViewRef$current;
+          (_flatListRef$current = flatListRef.current) === null || _flatListRef$current === void 0 ? void 0 : _flatListRef$current.scrollToIndex({
+            index: index,
+            viewPosition: 0.5
+          });
+          (_pagerViewRef$current = pagerViewRef.current) === null || _pagerViewRef$current === void 0 ? void 0 : _pagerViewRef$current.setPage(index);
+          if (onTabPress) {
+            onTabPress(tabKey);
+          }
+        }
+      },
+      getFlatListRef: function getFlatListRef() {
+        return flatListRef.current;
+      },
+      getPagerViewRef: function getPagerViewRef() {
+        return pagerViewRef.current;
+      }
+    };
+  }, [pagerViewRef, flatListRef, tabs]);
   React.useEffect(function () {
     var timeoutHandle = null;
     if (selectedTabIndex !== -1) {
-      var _flatListRef$current;
-      (_flatListRef$current = flatListRef.current) === null || _flatListRef$current === void 0 ? void 0 : _flatListRef$current.scrollToIndex({
+      var _flatListRef$current2;
+      (_flatListRef$current2 = flatListRef.current) === null || _flatListRef$current2 === void 0 ? void 0 : _flatListRef$current2.scrollToIndex({
         index: selectedTabIndex,
         viewPosition: 0.5
       });
       // If the selected tab is changed too quickly, the setPage is crashed and not work anymore
       // We apply throttle to prevent this issue https://github.com/Thinkei/hero-design/issues/1715
       timeoutHandle = setTimeout(function () {
-        var _pagerViewRef$current;
+        var _pagerViewRef$current2;
         // use no animation to prevent unexpected behavior if users select tab too quickly
-        (_pagerViewRef$current = pagerViewRef.current) === null || _pagerViewRef$current === void 0 ? void 0 : _pagerViewRef$current.setPageWithoutAnimation(selectedTabIndex);
+        (_pagerViewRef$current2 = pagerViewRef.current) === null || _pagerViewRef$current2 === void 0 ? void 0 : _pagerViewRef$current2.setPageWithoutAnimation(selectedTabIndex);
       }, 200);
     }
     var animation = Animated.parallel(_toConsumableArray(tabs.map(function (_, i) {
@@ -14581,7 +14608,7 @@ var ScrollableTab = function ScrollableTab(_ref2) {
         clearTimeout(timeoutHandle);
       }
     };
-  }, [selectedTabIndex, pagerViewRef]);
+  }, [selectedTabIndex, selectedTabKey, pagerViewRef]);
   return /*#__PURE__*/React.createElement(TabContainer, {
     style: containerStyle,
     testID: componentTestID
@@ -14600,8 +14627,8 @@ var ScrollableTab = function ScrollableTab(_ref2) {
     onScrollToIndexFailed: function onScrollToIndexFailed(_ref3) {
       var index = _ref3.index;
       setTimeout(function () {
-        var _flatListRef$current2;
-        return (_flatListRef$current2 = flatListRef.current) === null || _flatListRef$current2 === void 0 ? void 0 : _flatListRef$current2.scrollToIndex({
+        var _flatListRef$current3;
+        return (_flatListRef$current3 = flatListRef.current) === null || _flatListRef$current3 === void 0 ? void 0 : _flatListRef$current3.scrollToIndex({
           index: index,
           viewPosition: 0.5
         });
@@ -14657,7 +14684,7 @@ var ScrollableTab = function ScrollableTab(_ref2) {
     onPageSelected: function onPageSelected(e) {
       var index = e.nativeEvent.position;
       var selectedItem = tabs[index];
-      if (selectedItem) {
+      if (selectedItem && selectedItem.key !== selectedTabKey) {
         onTabPress(selectedItem.key);
       }
     },
@@ -14677,7 +14704,7 @@ var ScrollableTab = function ScrollableTab(_ref2) {
       collapsable: false
     }, isLazyScreen ? null : component);
   })));
-};
+});
 
 var getTabItem = function getTabItem(_ref) {
   var item = _ref.item,

package/lib/index.js

@@ -14557,8 +14557,9 @@ var getTabItem$1 = function getTabItem(_ref) {
     color: color
   });
 };
-var ScrollableTab = function ScrollableTab(_ref2) {
-  var onTabPress = _ref2.onTabPress,
+var ScrollableTab = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+  var _ref2$onTabPress = _ref2.onTabPress,
+    onTabPress = _ref2$onTabPress === void 0 ? noop : _ref2$onTabPress,
     selectedTabKey = _ref2.selectedTabKey,
     tabs = _ref2.tabs,
     containerStyle = _ref2.containerStyle,
@@ -14580,20 +14581,46 @@ var ScrollableTab = function ScrollableTab(_ref2) {
   var tabsAnims = useAnimatedValueArray(tabs.map(function (_, i) {
     return i === selectedTabIndex ? 1 : 0;
   }));
+  React__default["default"].useImperativeHandle(ref, function () {
+    return {
+      selectTabKey: function selectTabKey(tabKey) {
+        var index = tabs.findIndex(function (item) {
+          return item.key === tabKey;
+        });
+        if (index !== -1) {
+          var _flatListRef$current, _pagerViewRef$current;
+          (_flatListRef$current = flatListRef.current) === null || _flatListRef$current === void 0 ? void 0 : _flatListRef$current.scrollToIndex({
+            index: index,
+            viewPosition: 0.5
+          });
+          (_pagerViewRef$current = pagerViewRef.current) === null || _pagerViewRef$current === void 0 ? void 0 : _pagerViewRef$current.setPage(index);
+          if (onTabPress) {
+            onTabPress(tabKey);
+          }
+        }
+      },
+      getFlatListRef: function getFlatListRef() {
+        return flatListRef.current;
+      },
+      getPagerViewRef: function getPagerViewRef() {
+        return pagerViewRef.current;
+      }
+    };
+  }, [pagerViewRef, flatListRef, tabs]);
   React__default["default"].useEffect(function () {
     var timeoutHandle = null;
     if (selectedTabIndex !== -1) {
-      var _flatListRef$current;
-      (_flatListRef$current = flatListRef.current) === null || _flatListRef$current === void 0 ? void 0 : _flatListRef$current.scrollToIndex({
+      var _flatListRef$current2;
+      (_flatListRef$current2 = flatListRef.current) === null || _flatListRef$current2 === void 0 ? void 0 : _flatListRef$current2.scrollToIndex({
         index: selectedTabIndex,
         viewPosition: 0.5
       });
       // If the selected tab is changed too quickly, the setPage is crashed and not work anymore
       // We apply throttle to prevent this issue https://github.com/Thinkei/hero-design/issues/1715
       timeoutHandle = setTimeout(function () {
-        var _pagerViewRef$current;
+        var _pagerViewRef$current2;
         // use no animation to prevent unexpected behavior if users select tab too quickly
-        (_pagerViewRef$current = pagerViewRef.current) === null || _pagerViewRef$current === void 0 ? void 0 : _pagerViewRef$current.setPageWithoutAnimation(selectedTabIndex);
+        (_pagerViewRef$current2 = pagerViewRef.current) === null || _pagerViewRef$current2 === void 0 ? void 0 : _pagerViewRef$current2.setPageWithoutAnimation(selectedTabIndex);
       }, 200);
     }
     var animation = reactNative.Animated.parallel(_toConsumableArray(tabs.map(function (_, i) {
@@ -14610,7 +14637,7 @@ var ScrollableTab = function ScrollableTab(_ref2) {
         clearTimeout(timeoutHandle);
       }
     };
-  }, [selectedTabIndex, pagerViewRef]);
+  }, [selectedTabIndex, selectedTabKey, pagerViewRef]);
   return /*#__PURE__*/React__default["default"].createElement(TabContainer, {
     style: containerStyle,
     testID: componentTestID
@@ -14629,8 +14656,8 @@ var ScrollableTab = function ScrollableTab(_ref2) {
     onScrollToIndexFailed: function onScrollToIndexFailed(_ref3) {
       var index = _ref3.index;
       setTimeout(function () {
-        var _flatListRef$current2;
-        return (_flatListRef$current2 = flatListRef.current) === null || _flatListRef$current2 === void 0 ? void 0 : _flatListRef$current2.scrollToIndex({
+        var _flatListRef$current3;
+        return (_flatListRef$current3 = flatListRef.current) === null || _flatListRef$current3 === void 0 ? void 0 : _flatListRef$current3.scrollToIndex({
           index: index,
           viewPosition: 0.5
         });
@@ -14686,7 +14713,7 @@ var ScrollableTab = function ScrollableTab(_ref2) {
     onPageSelected: function onPageSelected(e) {
       var index = e.nativeEvent.position;
       var selectedItem = tabs[index];
-      if (selectedItem) {
+      if (selectedItem && selectedItem.key !== selectedTabKey) {
         onTabPress(selectedItem.key);
       }
     },
@@ -14706,7 +14733,7 @@ var ScrollableTab = function ScrollableTab(_ref2) {
       collapsable: false
     }, isLazyScreen ? null : component);
   })));
-};
+});
 
 var getTabItem = function getTabItem(_ref) {
   var item = _ref.item,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.12.4",
+  "version": "8.12.5-alpha.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.12.4",
+    "@hero-design/colors": "8.12.5",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21"
@@ -44,7 +44,7 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.12.4",
+    "@hero-design/eslint-plugin": "8.12.5",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -60,9 +60,9 @@
     "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
-    "eslint-config-hd": "8.12.4",
+    "eslint-config-hd": "8.12.5",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.12.4",
+    "prettier-config-hd": "8.12.5",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.1.0",