@hero-design/rn 8.63.2 → 8.63.4-alpha.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @hero-design/rn
 
+## 8.63.3
+
+### Patch Changes
+
+- [#3129](https://github.com/Thinkei/hero-design/pull/3129) [`116f04b1a`](https://github.com/Thinkei/hero-design/commit/116f04b1ae7a63a4f3563a935989a318200ce044) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - Fix mobile visual tests workflow
+
+- Updated dependencies [[`de331a19e`](https://github.com/Thinkei/hero-design/commit/de331a19ea56e55ff18b060a21b31831df60c794), [`264d28d3c`](https://github.com/Thinkei/hero-design/commit/264d28d3cb2f68b96bc94f4b72a9681cd4c4abb0)]:
+  - @hero-design/react-native-month-year-picker@8.42.10
+
 ## 8.63.2
 
 ### Patch Changes

package/es/index.js

@@ -15040,6 +15040,7 @@ var Toast$1 = function Toast(_ref2) {
     outputRange: toastConfig.position === 'top' ? [-20, distance] : [20, -distance]
   });
   return /*#__PURE__*/React__default.createElement(Container, {
+    testID: "toast-container",
     themeVariant: variant,
     themeIntent: intent,
     style: [style, {
@@ -17826,6 +17827,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() {
@@ -17853,14 +17868,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
@@ -17877,7 +17893,7 @@ var ScrollableTab = function ScrollableTab(_ref) {
       }
     };
   }, [selectedTabIndex, pagerViewRef]);
-  var tabContextProviderValue = React__default.useMemo(function () {
+  var tabContextProviderValue = useMemo(function () {
     return {
       selectedTabKey: selectedTabKey
     };
@@ -17899,11 +17915,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];
@@ -17967,23 +17979,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
     };
@@ -18039,10 +18054,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/eslint.config.js

@@ -0,0 +1,42 @@
+const heroDesign = require('@hero-design/eslint-plugin');
+const _import = require('eslint-plugin-import');
+const { FlatCompat } = require('@eslint/eslintrc');
+const { includeIgnoreFile } = require('@eslint/compat');
+const path = require('path');
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const gitignorePath = path.resolve(__dirname, '../../.gitignore');
+
+module.exports = [
+  ...compat.extends('hd', 'plugin:@hero-design/recommendedRn'),
+  includeIgnoreFile(gitignorePath),
+  {
+    files: ['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx'],
+
+    plugins: {
+      '@hero-design': heroDesign,
+      import: _import,
+    },
+
+    languageOptions: {
+      parserOptions: {
+        tsconfigRootDir: __dirname,
+        project: ['./tsconfig.json'],
+      },
+    },
+
+    rules: {
+      'no-underscore-dangle': [
+        'error',
+        {
+          allow: ['__hd__'],
+        },
+      ],
+
+      'import/no-cycle': 'error',
+    },
+  },
+];

package/lib/index.js

@@ -15070,6 +15070,7 @@ var Toast$1 = function Toast(_ref2) {
     outputRange: toastConfig.position === 'top' ? [-20, distance] : [20, -distance]
   });
   return /*#__PURE__*/React__default["default"].createElement(Container, {
+    testID: "toast-container",
     themeVariant: variant,
     themeIntent: intent,
     style: [style, {
@@ -17856,6 +17857,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() {
@@ -17883,14 +17898,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
@@ -17907,7 +17923,7 @@ var ScrollableTab = function ScrollableTab(_ref) {
       }
     };
   }, [selectedTabIndex, pagerViewRef]);
-  var tabContextProviderValue = React__default["default"].useMemo(function () {
+  var tabContextProviderValue = React.useMemo(function () {
     return {
       selectedTabKey: selectedTabKey
     };
@@ -17929,11 +17945,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];
@@ -17997,23 +18009,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
     };
@@ -18069,10 +18084,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,12 +1,12 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.63.2",
+  "version": "8.63.4-alpha.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
   "types": "types/index.d.ts",
   "scripts": {
-    "lint": "eslint src --ext .js,.jsx,.ts,.tsx --ignore-path ../../.gitignore",
+    "lint": "eslint src",
     "type-check": "tsc --noEmit",
     "test": "jest --runInBand",
     "test:watch": "jest --runInBand --watch",
@@ -28,7 +28,7 @@
     "nanoid": "^4.0.2"
   },
   "peerDependencies": {
-    "@hero-design/react-native-month-year-picker": "^8.42.9",
+    "@hero-design/react-native-month-year-picker": "^8.42.10",
     "@react-native-community/datetimepicker": "^3.5.2 || ^7.6.1",
     "@react-native-community/slider": "^4.5.1",
     "react": "18.2.0",
@@ -47,8 +47,11 @@
     "@babel/preset-typescript": "^7.20.0",
     "@babel/runtime": "^7.20.0",
     "@emotion/jest": "^11.11.0",
-    "@hero-design/eslint-plugin": "9.0.0",
-    "@hero-design/react-native-month-year-picker": "^8.42.9",
+    "@eslint/compat": "^1.1.1",
+    "@eslint/eslintrc": "^3.1.0",
+    "@eslint/js": "^9.8.0",
+    "@hero-design/eslint-plugin": "9.0.1",
+    "@hero-design/react-native-month-year-picker": "^8.42.10",
     "@react-native-community/datetimepicker": "7.6.1",
     "@react-native-community/slider": "^4.5.1",
     "@rollup/plugin-babel": "^5.3.1",
@@ -86,6 +89,7 @@
     "rollup": "^2.68.0",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-flow": "^1.1.1",
+    "rollup-plugin-visualizer": "^5.12.0",
     "ts-jest": "^29.1.1",
     "typescript": "4.8.4"
   },

package/rollup.config.js

@@ -6,11 +6,16 @@ import json from '@rollup/plugin-json';
 import replace from '@rollup/plugin-replace';
 import copy from 'rollup-plugin-copy';
 import flow from 'rollup-plugin-flow';
+import { visualizer } from 'rollup-plugin-visualizer';
 
 import pkg from './package.json';
 
 const extensions = ['.js', '.jsx', '.ts', '.tsx'];
 
+const generateBuildStats = process.env.GENERATE_BUILD_STATS === 'true';
+const bundleTemplate = process.env.BUNDLE_TEMPLATE || 'treemap';
+const fileName = process.env.FILE_NAME || `stats/${pkg.version}/rn-stats.html`;
+
 export default {
   input: 'src/index.ts',
   output: [
@@ -54,5 +59,13 @@ export default {
         },
       ],
     }),
+    ...(generateBuildStats
+      ? [
+          visualizer({
+            filename: fileName,
+            template: bundleTemplate,
+          }),
+        ]
+      : []),
   ],
 };

package/sonar-project.properties

@@ -6,6 +6,6 @@ sonar.organization=thinkei
 
 sonar.sources=.
 sonar.inclusions=**/*
-sonar.exclusions=**/__tests__/**,**/public/**
+sonar.exclusions=**/__tests__/**,**/public/**,**/stats/**,**.config.js
 sonar.java.binaries=**/src/main/java
 sonar.javascript.lcov.reportPaths=./coverage/lcov.info

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/src/components/Toast/Toast.tsx

@@ -92,6 +92,7 @@ const Toast = ({
 
   return (
     <Container
+      testID="toast-container"
       themeVariant={variant}
       themeIntent={intent}
       style={[