@hero-design/rn 8.3.2 → 8.3.3

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
-@hero-design/rn:build: cache hit, replaying output 5e986a2b883ef3bb
-@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 28.6s
-@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json
+@hero-design/rn:build: cache hit, replaying output a707437faede395b
+@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 24.4s
+@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/es/index.js

@@ -13954,13 +13954,20 @@ var ScrollableTab = function ScrollableTab(_ref2) {
     return i === selectedTabIndex ? 1 : 0;
   }));
   React.useEffect(function () {
+    var timeoutHandle = null;
     if (selectedTabIndex !== -1) {
-      var _flatListRef$current, _pagerViewRef$current;
+      var _flatListRef$current;
       (_flatListRef$current = flatListRef.current) === null || _flatListRef$current === void 0 ? void 0 : _flatListRef$current.scrollToIndex({
         index: selectedTabIndex,
         viewPosition: 0.5
       });
-      (_pagerViewRef$current = pagerViewRef.current) === null || _pagerViewRef$current === void 0 ? void 0 : _pagerViewRef$current.setPage(selectedTabIndex);
+      // 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;
+        // 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);
+      }, 200);
     }
     var animation = Animated.parallel(_toConsumableArray(tabs.map(function (_, i) {
       return Animated.timing(tabsAnims[i], {
@@ -13971,9 +13978,12 @@ var ScrollableTab = function ScrollableTab(_ref2) {
     })));
     animation.start();
     return function () {
-      return animation.stop();
+      animation.stop();
+      if (timeoutHandle) {
+        clearTimeout(timeoutHandle);
+      }
     };
-  }, [selectedTabIndex]);
+  }, [selectedTabIndex, pagerViewRef]);
   return /*#__PURE__*/React.createElement(TabContainer, {
     style: containerStyle,
     testID: componentTestID

package/lib/index.js

@@ -13983,13 +13983,20 @@ var ScrollableTab = function ScrollableTab(_ref2) {
     return i === selectedTabIndex ? 1 : 0;
   }));
   React__default["default"].useEffect(function () {
+    var timeoutHandle = null;
     if (selectedTabIndex !== -1) {
-      var _flatListRef$current, _pagerViewRef$current;
+      var _flatListRef$current;
       (_flatListRef$current = flatListRef.current) === null || _flatListRef$current === void 0 ? void 0 : _flatListRef$current.scrollToIndex({
         index: selectedTabIndex,
         viewPosition: 0.5
       });
-      (_pagerViewRef$current = pagerViewRef.current) === null || _pagerViewRef$current === void 0 ? void 0 : _pagerViewRef$current.setPage(selectedTabIndex);
+      // 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;
+        // 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);
+      }, 200);
     }
     var animation = reactNative.Animated.parallel(_toConsumableArray(tabs.map(function (_, i) {
       return reactNative.Animated.timing(tabsAnims[i], {
@@ -14000,9 +14007,12 @@ var ScrollableTab = function ScrollableTab(_ref2) {
     })));
     animation.start();
     return function () {
-      return animation.stop();
+      animation.stop();
+      if (timeoutHandle) {
+        clearTimeout(timeoutHandle);
+      }
     };
-  }, [selectedTabIndex]);
+  }, [selectedTabIndex, pagerViewRef]);
   return /*#__PURE__*/React__default["default"].createElement(TabContainer, {
     style: containerStyle,
     testID: componentTestID

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.3.2",
+  "version": "8.3.3",
   "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.3.2",
+    "@hero-design/colors": "8.3.3",
     "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.3.2",
+    "@hero-design/eslint-plugin": "8.3.3",
     "@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.3.2",
+    "eslint-config-hd": "8.3.3",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.3.2",
+    "prettier-config-hd": "8.3.3",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.1.0",

package/src/components/Tabs/ScrollableTabs.tsx

@@ -78,12 +78,18 @@ const ScrollableTab = ({
   );
 
   React.useEffect(() => {
+    let timeoutHandle: number | null = null;
     if (selectedTabIndex !== -1) {
       flatListRef.current?.scrollToIndex({
         index: selectedTabIndex,
         viewPosition: 0.5,
       });
-      pagerViewRef.current?.setPage(selectedTabIndex);
+      // 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(() => {
+        // use no animation to prevent unexpected behavior if users select tab too quickly
+        pagerViewRef.current?.setPageWithoutAnimation(selectedTabIndex);
+      }, 200);
     }
 
     const animation = Animated.parallel([
@@ -97,8 +103,13 @@ const ScrollableTab = ({
     ]);
     animation.start();
 
-    return () => animation.stop();
-  }, [selectedTabIndex]);
+    return () => {
+      animation.stop();
+      if (timeoutHandle) {
+        clearTimeout(timeoutHandle);
+      }
+    };
+  }, [selectedTabIndex, pagerViewRef]);
 
   return (
     <TabContainer style={containerStyle} testID={componentTestID}>