@hero-design/rn 8.64.0 → 8.64.1

package/.turbo/turbo-build.log

@@ -2,4 +2,4 @@
 src/index.ts → lib/index.js, es/index.js...
 (!) 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`.
 (!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/home/runner/work/hero-design/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
-created lib/index.js, es/index.js in 1m 0.7s
+created lib/index.js, es/index.js in 1m 4.4s

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hero-design/rn
 
+## 8.64.1
+
+### Patch Changes
+
+- [#3246](https://github.com/Thinkei/hero-design/pull/3246) [`1dbb5e198`](https://github.com/Thinkei/hero-design/commit/1dbb5e1985e4b316ca08cd39c10d4d0779aaa43d) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Tabs] Fix onTabPress being called on render
+
 ## 8.64.0
 
 ### Minor Changes

package/es/index.js

@@ -17871,6 +17871,20 @@ var ScrollableTabHeader = function ScrollableTabHeader(_ref2) {
   }));
 };
 
+var useHandlePageScroll = function useHandlePageScroll() {
+  // Used as a flag to prevent calling onTabPress on initial render
+  var hasScrolled = useRef(false);
+  var onPageScrollStateChanged = useCallback(function (e) {
+    if (!hasScrolled.current && e.nativeEvent.pageScrollState === 'dragging') {
+      hasScrolled.current = true;
+    }
+  }, []);
+  return {
+    onPageScrollStateChanged: onPageScrollStateChanged,
+    hasScrolled: hasScrolled
+  };
+};
+
 var TabContext = /*#__PURE__*/React__default.createContext(null);
 var ScreenContext = /*#__PURE__*/React__default.createContext(null);
 var useIsFocused = function useIsFocused() {
@@ -17898,14 +17912,15 @@ var ScrollableTab = function ScrollableTab(_ref) {
     componentTestID = _ref.testID,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'highlighted' : _ref$variant;
-  var pagerViewRef = React__default.useRef(null);
+  var pagerViewRef = useRef(null);
   var insets = useSafeAreaInsets();
   var selectedTabIndex = tabs.findIndex(function (item) {
     return item.key === selectedTabKey;
   });
-  // Used as a flag to prevent calling onTabPress on initial render
-  var hasScrolled = useRef(false);
-  React__default.useEffect(function () {
+  var _useHandlePageScroll = useHandlePageScroll(),
+    hasScrolled = _useHandlePageScroll.hasScrolled,
+    onPageScrollStateChanged = _useHandlePageScroll.onPageScrollStateChanged;
+  useEffect(function () {
     var timeoutHandle;
     if (selectedTabIndex !== -1) {
       // If the selected tab is changed too quickly, the setPage is crashed and not work anymore
@@ -17922,7 +17937,7 @@ var ScrollableTab = function ScrollableTab(_ref) {
       }
     };
   }, [selectedTabIndex, pagerViewRef]);
-  var tabContextProviderValue = React__default.useMemo(function () {
+  var tabContextProviderValue = useMemo(function () {
     return {
       selectedTabKey: selectedTabKey
     };
@@ -17944,11 +17959,7 @@ var ScrollableTab = function ScrollableTab(_ref) {
     useNext: true,
     initialPage: selectedTabIndex,
     ref: pagerViewRef,
-    onPageScrollStateChanged: function onPageScrollStateChanged(e) {
-      if (!hasScrolled.current && e.nativeEvent.pageScrollState === 'dragging') {
-        hasScrolled.current = true;
-      }
-    },
+    onPageScrollStateChanged: onPageScrollStateChanged,
     onPageSelected: function onPageSelected(e) {
       var index = e.nativeEvent.position;
       var selectedItem = tabs[index];
@@ -18012,23 +18023,26 @@ var Tabs = function Tabs(_ref2) {
     componentTestID = _ref2.testID;
   var theme = useTheme$1();
   var insets = useSafeAreaInsets();
-  var pagerViewRef = React__default.useRef(null);
+  var pagerViewRef = useRef(null);
   var selectedTabIndex = tabs.findIndex(function (item) {
     return item.key === selectedTabKey;
   });
-  var scrollOffsetAnimatedValue = React__default.useRef(new Animated.Value(0)).current;
-  var positionAnimatedValue = React__default.useRef(new Animated.Value(0)).current;
-  var _React$useState = React__default.useState(0),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    tabsWidth = _React$useState2[0],
-    setTabsWidth = _React$useState2[1];
+  var scrollOffsetAnimatedValue = useRef(new Animated.Value(0)).current;
+  var positionAnimatedValue = useRef(new Animated.Value(0)).current;
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    tabsWidth = _useState2[0],
+    setTabsWidth = _useState2[1];
+  var _useHandlePageScroll = useHandlePageScroll(),
+    onPageScrollStateChanged = _useHandlePageScroll.onPageScrollStateChanged,
+    hasScrolled = _useHandlePageScroll.hasScrolled;
   useEffect(function () {
     if (selectedTabIndex !== -1) {
       var _pagerViewRef$current;
       (_pagerViewRef$current = pagerViewRef.current) === null || _pagerViewRef$current === void 0 || _pagerViewRef$current.setPage(selectedTabIndex);
     }
   }, [selectedTabIndex]);
-  var tabContextProviderValue = React__default.useMemo(function () {
+  var tabContextProviderValue = useMemo(function () {
     return {
       selectedTabKey: selectedTabKey
     };
@@ -18084,10 +18098,11 @@ var Tabs = function Tabs(_ref2) {
     onPageSelected: function onPageSelected(e) {
       var index = e.nativeEvent.position;
       var selectedItem = tabs[index];
-      if (selectedItem) {
+      if (hasScrolled.current && selectedItem) {
         onTabPress(selectedItem.key);
       }
     },
+    onPageScrollStateChanged: onPageScrollStateChanged,
     onPageScroll: Animated.event([{
       nativeEvent: {
         offset: scrollOffsetAnimatedValue,

package/lib/index.js

@@ -17901,6 +17901,20 @@ var ScrollableTabHeader = function ScrollableTabHeader(_ref2) {
   }));
 };
 
+var useHandlePageScroll = function useHandlePageScroll() {
+  // Used as a flag to prevent calling onTabPress on initial render
+  var hasScrolled = React.useRef(false);
+  var onPageScrollStateChanged = React.useCallback(function (e) {
+    if (!hasScrolled.current && e.nativeEvent.pageScrollState === 'dragging') {
+      hasScrolled.current = true;
+    }
+  }, []);
+  return {
+    onPageScrollStateChanged: onPageScrollStateChanged,
+    hasScrolled: hasScrolled
+  };
+};
+
 var TabContext = /*#__PURE__*/React__default["default"].createContext(null);
 var ScreenContext = /*#__PURE__*/React__default["default"].createContext(null);
 var useIsFocused = function useIsFocused() {
@@ -17928,14 +17942,15 @@ var ScrollableTab = function ScrollableTab(_ref) {
     componentTestID = _ref.testID,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'highlighted' : _ref$variant;
-  var pagerViewRef = React__default["default"].useRef(null);
+  var pagerViewRef = React.useRef(null);
   var insets = reactNativeSafeAreaContext.useSafeAreaInsets();
   var selectedTabIndex = tabs.findIndex(function (item) {
     return item.key === selectedTabKey;
   });
-  // Used as a flag to prevent calling onTabPress on initial render
-  var hasScrolled = React.useRef(false);
-  React__default["default"].useEffect(function () {
+  var _useHandlePageScroll = useHandlePageScroll(),
+    hasScrolled = _useHandlePageScroll.hasScrolled,
+    onPageScrollStateChanged = _useHandlePageScroll.onPageScrollStateChanged;
+  React.useEffect(function () {
     var timeoutHandle;
     if (selectedTabIndex !== -1) {
       // If the selected tab is changed too quickly, the setPage is crashed and not work anymore
@@ -17952,7 +17967,7 @@ var ScrollableTab = function ScrollableTab(_ref) {
       }
     };
   }, [selectedTabIndex, pagerViewRef]);
-  var tabContextProviderValue = React__default["default"].useMemo(function () {
+  var tabContextProviderValue = React.useMemo(function () {
     return {
       selectedTabKey: selectedTabKey
     };
@@ -17974,11 +17989,7 @@ var ScrollableTab = function ScrollableTab(_ref) {
     useNext: true,
     initialPage: selectedTabIndex,
     ref: pagerViewRef,
-    onPageScrollStateChanged: function onPageScrollStateChanged(e) {
-      if (!hasScrolled.current && e.nativeEvent.pageScrollState === 'dragging') {
-        hasScrolled.current = true;
-      }
-    },
+    onPageScrollStateChanged: onPageScrollStateChanged,
     onPageSelected: function onPageSelected(e) {
       var index = e.nativeEvent.position;
       var selectedItem = tabs[index];
@@ -18042,23 +18053,26 @@ var Tabs = function Tabs(_ref2) {
     componentTestID = _ref2.testID;
   var theme = useTheme$1();
   var insets = reactNativeSafeAreaContext.useSafeAreaInsets();
-  var pagerViewRef = React__default["default"].useRef(null);
+  var pagerViewRef = React.useRef(null);
   var selectedTabIndex = tabs.findIndex(function (item) {
     return item.key === selectedTabKey;
   });
-  var scrollOffsetAnimatedValue = React__default["default"].useRef(new reactNative.Animated.Value(0)).current;
-  var positionAnimatedValue = React__default["default"].useRef(new reactNative.Animated.Value(0)).current;
-  var _React$useState = React__default["default"].useState(0),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    tabsWidth = _React$useState2[0],
-    setTabsWidth = _React$useState2[1];
+  var scrollOffsetAnimatedValue = React.useRef(new reactNative.Animated.Value(0)).current;
+  var positionAnimatedValue = React.useRef(new reactNative.Animated.Value(0)).current;
+  var _useState = React.useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    tabsWidth = _useState2[0],
+    setTabsWidth = _useState2[1];
+  var _useHandlePageScroll = useHandlePageScroll(),
+    onPageScrollStateChanged = _useHandlePageScroll.onPageScrollStateChanged,
+    hasScrolled = _useHandlePageScroll.hasScrolled;
   React.useEffect(function () {
     if (selectedTabIndex !== -1) {
       var _pagerViewRef$current;
       (_pagerViewRef$current = pagerViewRef.current) === null || _pagerViewRef$current === void 0 || _pagerViewRef$current.setPage(selectedTabIndex);
     }
   }, [selectedTabIndex]);
-  var tabContextProviderValue = React__default["default"].useMemo(function () {
+  var tabContextProviderValue = React.useMemo(function () {
     return {
       selectedTabKey: selectedTabKey
     };
@@ -18114,10 +18128,11 @@ var Tabs = function Tabs(_ref2) {
     onPageSelected: function onPageSelected(e) {
       var index = e.nativeEvent.position;
       var selectedItem = tabs[index];
-      if (selectedItem) {
+      if (hasScrolled.current && selectedItem) {
         onTabPress(selectedItem.key);
       }
     },
+    onPageScrollStateChanged: onPageScrollStateChanged,
     onPageScroll: reactNative.Animated.event([{
       nativeEvent: {
         offset: scrollOffsetAnimatedValue,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.64.0",
+  "version": "8.64.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/components/Tabs/ScrollableTabs.tsx

@@ -1,10 +1,11 @@
-import React, { useRef } from 'react';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import React, { useEffect, useMemo, useRef } from 'react';
 import PagerView from 'react-native-pager-view';
-import { TabContainer } from './StyledScrollableTabs';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import type { TabsProps } from '.';
 import SceneView from './SceneView';
 import ScrollableTabHeader from './ScrollableTabsHeader/ScrollableTabsHeader';
+import { TabContainer } from './StyledScrollableTabs';
+import useHandlePageScroll from './useHandlePageScroll';
 import { ScreenContext, TabContext } from './useIsFocused';
 
 export interface ScrollableTabProps extends TabsProps {
@@ -23,15 +24,15 @@ const ScrollableTab = ({
   testID: componentTestID,
   variant = 'highlighted',
 }: ScrollableTabProps) => {
-  const pagerViewRef = React.useRef<PagerView>(null);
+  const pagerViewRef = useRef<PagerView>(null);
   const insets = useSafeAreaInsets();
   const selectedTabIndex = tabs.findIndex(
     (item) => item.key === selectedTabKey
   );
-  // Used as a flag to prevent calling onTabPress on initial render
-  const hasScrolled = useRef(false);
 
-  React.useEffect(() => {
+  const { hasScrolled, onPageScrollStateChanged } = useHandlePageScroll();
+
+  useEffect(() => {
     let timeoutHandle: ReturnType<typeof setTimeout>;
     if (selectedTabIndex !== -1) {
       // If the selected tab is changed too quickly, the setPage is crashed and not work anymore
@@ -49,7 +50,7 @@ const ScrollableTab = ({
     };
   }, [selectedTabIndex, pagerViewRef]);
 
-  const tabContextProviderValue = React.useMemo(
+  const tabContextProviderValue = useMemo(
     () => ({
       selectedTabKey,
     }),
@@ -72,14 +73,7 @@ const ScrollableTab = ({
           useNext
           initialPage={selectedTabIndex}
           ref={pagerViewRef}
-          onPageScrollStateChanged={(e) => {
-            if (
-              !hasScrolled.current &&
-              e.nativeEvent.pageScrollState === 'dragging'
-            ) {
-              hasScrolled.current = true;
-            }
-          }}
+          onPageScrollStateChanged={onPageScrollStateChanged}
           onPageSelected={(e) => {
             const index = e.nativeEvent.position;
             const selectedItem = tabs[index];

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

@@ -99,6 +99,38 @@ describe('Tabs.Scroll', () => {
     expect(getByText('Calendar Screen unfocused')).toBeDefined();
   });
 
+  it('calls onTabPress correctly', () => {
+    const onTabPress = jest.fn();
+    const { getByText } = renderWithTheme(
+      <SafeAreaProvider
+        initialMetrics={{
+          frame: { x: 0, y: 0, width: 0, height: 0 },
+          insets: { top: 0, left: 0, right: 0, bottom: 0 },
+        }}
+      >
+        <ScrollableTabs
+          tabs={[
+            {
+              key: 'work',
+              activeItem: 'Work',
+              component: <CustomScreen title="Work Screen" />,
+            },
+          ]}
+          onTabPress={onTabPress}
+          selectedTabKey="work"
+        />
+      </SafeAreaProvider>
+    );
+
+    // Not calling the function on first render
+    expect(onTabPress).not.toHaveBeenCalled();
+
+    // Calling the function on tab press
+    fireEvent.press(getByText('Work'));
+
+    expect(onTabPress).toHaveBeenCalledTimes(1);
+  });
+
   describe('lazy', () => {
     it('render all screens when lazy = false', async () => {
       const { queryByText } = renderWithTheme(

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

@@ -110,6 +110,38 @@ describe('Tabs', () => {
     fireEvent.press(getByText('Home'));
     expect(getByText('Home Screen focused')).toBeDefined();
   });
+
+  it('calls onTabPress only when pressed', () => {
+    const onTabPress = jest.fn();
+    const { getByText } = renderWithTheme(
+      <SafeAreaProvider
+        initialMetrics={{
+          frame: { x: 0, y: 0, width: 0, height: 0 },
+          insets: { top: 0, left: 0, right: 0, bottom: 0 },
+        }}
+      >
+        <Tabs
+          tabs={[
+            {
+              key: 'work',
+              activeItem: 'Work',
+              component: <CustomScreen title="Work Screen" />,
+            },
+          ]}
+          onTabPress={onTabPress}
+          selectedTabKey="work"
+        />
+      </SafeAreaProvider>
+    );
+
+    // Not calling the function on first render
+    expect(onTabPress).not.toHaveBeenCalled();
+
+    // Calling the function on tab press
+    fireEvent.press(getByText('Work'));
+
+    expect(onTabPress).toHaveBeenCalledTimes(1);
+  });
 });
 
 describe('useIsFocused', () => {

package/src/components/Tabs/index.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '@emotion/react';
 import type { ReactNode } from 'react';
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
 import { Animated, TouchableWithoutFeedback, View } from 'react-native';
 import type { PagerViewOnPageScrollEventData } from 'react-native-pager-view';
@@ -19,6 +19,7 @@ import {
 } from './StyledTabs';
 import type { BadgeConfigType } from './TabWithBadge';
 import TabWithBadge from './TabWithBadge';
+import useHandlePageScroll from './useHandlePageScroll';
 import { ScreenContext, TabContext, useIsFocused } from './useIsFocused';
 
 export type ItemType =
@@ -57,7 +58,7 @@ export interface TabsProps extends ViewProps {
    */
   barStyle?: StyleProp<ViewStyle>;
   /**
-   * Whether inactive screen should be removed and unmounted in React.
+   * Whether inactive screen should be removed and unmounted in
    * Defaults value is `false`.
    */
   lazy?: boolean;
@@ -116,13 +117,15 @@ const Tabs = ({
 }: TabsProps): JSX.Element => {
   const theme = useTheme();
   const insets = useSafeAreaInsets();
-  const pagerViewRef = React.useRef<PagerView>(null);
+  const pagerViewRef = useRef<PagerView>(null);
   const selectedTabIndex = tabs.findIndex(
     (item) => item.key === selectedTabKey
   );
-  const scrollOffsetAnimatedValue = React.useRef(new Animated.Value(0)).current;
-  const positionAnimatedValue = React.useRef(new Animated.Value(0)).current;
-  const [tabsWidth, setTabsWidth] = React.useState<number>(0);
+  const scrollOffsetAnimatedValue = useRef(new Animated.Value(0)).current;
+  const positionAnimatedValue = useRef(new Animated.Value(0)).current;
+  const [tabsWidth, setTabsWidth] = useState<number>(0);
+
+  const { onPageScrollStateChanged, hasScrolled } = useHandlePageScroll();
 
   useEffect(() => {
     if (selectedTabIndex !== -1) {
@@ -130,7 +133,7 @@ const Tabs = ({
     }
   }, [selectedTabIndex]);
 
-  const tabContextProviderValue = React.useMemo(
+  const tabContextProviderValue = useMemo(
     () => ({
       selectedTabKey,
     }),
@@ -201,10 +204,11 @@ const Tabs = ({
           onPageSelected={(e) => {
             const index = e.nativeEvent.position;
             const selectedItem = tabs[index];
-            if (selectedItem) {
+            if (hasScrolled.current && selectedItem) {
               onTabPress(selectedItem.key);
             }
           }}
+          onPageScrollStateChanged={onPageScrollStateChanged}
           onPageScroll={Animated.event<PagerViewOnPageScrollEventData>(
             [
               {

package/src/components/Tabs/useHandlePageScroll.tsx

@@ -0,0 +1,32 @@
+import { useCallback, useRef } from 'react';
+import { NativeSyntheticEvent } from 'react-native';
+
+const useHandlePageScroll = () => {
+  // Used as a flag to prevent calling onTabPress on initial render
+  const hasScrolled = useRef(false);
+
+  const onPageScrollStateChanged = useCallback(
+    (
+      e: NativeSyntheticEvent<
+        Readonly<{
+          pageScrollState: 'idle' | 'dragging' | 'settling';
+        }>
+      >
+    ) => {
+      if (
+        !hasScrolled.current &&
+        e.nativeEvent.pageScrollState === 'dragging'
+      ) {
+        hasScrolled.current = true;
+      }
+    },
+    []
+  );
+
+  return {
+    onPageScrollStateChanged,
+    hasScrolled,
+  };
+};
+
+export default useHandlePageScroll;

package/stats/8.64.0/rn-stats.html

@@ -4840,3 +4840,5 @@ var drawChart = (function (exports) {
 </body>
 </html>
 
+>
+