@hero-design/rn 8.63.0 → 8.63.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 55.8s
+created lib/index.js, es/index.js in 1m 0.7s

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @hero-design/rn
 
+## 8.63.1
+
+### Patch Changes
+
+- [#3096](https://github.com/Thinkei/hero-design/pull/3096) [`d1f6a9a84`](https://github.com/Thinkei/hero-design/commit/d1f6a9a84521f76a5350ed10db6640f4ea35ad32) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - Upgrade react-native to 0.73.8
+
+- Updated dependencies [[`d1f6a9a84`](https://github.com/Thinkei/hero-design/commit/d1f6a9a84521f76a5350ed10db6640f4ea35ad32)]:
+  - @hero-design/react-native-month-year-picker@8.42.9
+
 ## 8.63.0
 
 ### Minor Changes

package/es/index.js

@@ -8423,7 +8423,7 @@ var BottomNavigationContainer = index$9(View)({
   flex: 1,
   overflow: 'hidden'
 });
-var ContentWrapper$2 = index$9(View)({
+var ContentWrapper = index$9(View)({
   flex: 1
 });
 var BottomBarWrapper = index$9(View)(function (_ref2) {
@@ -8486,7 +8486,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
       return [].concat(_toConsumableArray(loadedState), [selectedTabKey]);
     });
   }
-  return /*#__PURE__*/React__default.createElement(BottomNavigationContainer, nativeProps, /*#__PURE__*/React__default.createElement(ContentWrapper$2, null, tabs.map(function (tab) {
+  return /*#__PURE__*/React__default.createElement(BottomNavigationContainer, nativeProps, /*#__PURE__*/React__default.createElement(ContentWrapper, null, tabs.map(function (tab) {
     var key = tab.key,
       component = tab.component,
       testID = tab.testID;
@@ -17374,7 +17374,6 @@ var index$3 = Object.assign(Switch, {
   Selector: SelectorSwitch
 });
 
-var AnimatedPagerView = Animated.createAnimatedComponent(PagerView);
 var TabContainer$1 = index$9(View)({
   flex: 1,
   overflow: 'hidden'
@@ -17399,9 +17398,6 @@ var HeaderTabItem$1 = index$9(View)(function (_ref2) {
     paddingVertical: theme.__hd__.tabs.space.itemVerticalPadding
   };
 });
-var ContentWrapper$1 = index$9(AnimatedPagerView)({
-  flex: 1
-});
 index$9(View)({
   flex: 1
 });
@@ -17449,9 +17445,6 @@ var TabContainer = index$9(View)({
   flex: 1,
   overflow: 'hidden'
 });
-var ContentWrapper = index$9(PagerView)({
-  flex: 1
-});
 var HeaderTabWrapper = index$9(View)(function (_ref) {
   var themeInsets = _ref.themeInsets;
   return {
@@ -17902,7 +17895,8 @@ var ScrollableTab = function ScrollableTab(_ref) {
     insets: insets,
     testID: componentTestID ? "".concat(componentTestID, "-tab-bar") : undefined,
     variant: variant
-  }), /*#__PURE__*/React__default.createElement(ContentWrapper, {
+  }), /*#__PURE__*/React__default.createElement(PagerView, {
+    useNext: true,
     initialPage: selectedTabIndex,
     ref: pagerViewRef,
     onPageScrollStateChanged: function onPageScrollStateChanged(e) {
@@ -17919,7 +17913,10 @@ var ScrollableTab = function ScrollableTab(_ref) {
         });
       }
     },
-    scrollEnabled: swipeEnabled
+    scrollEnabled: swipeEnabled,
+    style: {
+      flex: 1
+    }
   }, tabs.map(function (tab, index) {
     var key = tab.key,
       component = tab.component,
@@ -17937,6 +17934,7 @@ var ScrollableTab = function ScrollableTab(_ref) {
   }))));
 };
 
+var AnimatedPagerView = Animated.createAnimatedComponent(PagerView);
 var getTabItem = function getTabItem(_ref) {
   var item = _ref.item,
     color = _ref.color,
@@ -18034,7 +18032,8 @@ var Tabs = function Tabs(_ref2) {
     scrollOffsetAnimatedValue: scrollOffsetAnimatedValue,
     tabsLength: tabs.length,
     tabsWidth: tabsWidth
-  }))), /*#__PURE__*/React__default.createElement(ContentWrapper$1, {
+  }))), /*#__PURE__*/React__default.createElement(AnimatedPagerView, {
+    useNext: true,
     initialPage: selectedTabIndex,
     ref: pagerViewRef,
     onPageSelected: function onPageSelected(e) {
@@ -18052,7 +18051,10 @@ var Tabs = function Tabs(_ref2) {
     }], {
       useNativeDriver: true
     }),
-    scrollEnabled: swipeEnabled
+    scrollEnabled: swipeEnabled,
+    style: {
+      flex: 1
+    }
   }, tabs.map(function (tab, index) {
     var key = tab.key,
       component = tab.component,

package/lib/index.js

@@ -8453,7 +8453,7 @@ var BottomNavigationContainer = index$9(reactNative.View)({
   flex: 1,
   overflow: 'hidden'
 });
-var ContentWrapper$2 = index$9(reactNative.View)({
+var ContentWrapper = index$9(reactNative.View)({
   flex: 1
 });
 var BottomBarWrapper = index$9(reactNative.View)(function (_ref2) {
@@ -8516,7 +8516,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
       return [].concat(_toConsumableArray(loadedState), [selectedTabKey]);
     });
   }
-  return /*#__PURE__*/React__default["default"].createElement(BottomNavigationContainer, nativeProps, /*#__PURE__*/React__default["default"].createElement(ContentWrapper$2, null, tabs.map(function (tab) {
+  return /*#__PURE__*/React__default["default"].createElement(BottomNavigationContainer, nativeProps, /*#__PURE__*/React__default["default"].createElement(ContentWrapper, null, tabs.map(function (tab) {
     var key = tab.key,
       component = tab.component,
       testID = tab.testID;
@@ -17404,7 +17404,6 @@ var index$3 = Object.assign(Switch, {
   Selector: SelectorSwitch
 });
 
-var AnimatedPagerView = reactNative.Animated.createAnimatedComponent(PagerView__default["default"]);
 var TabContainer$1 = index$9(reactNative.View)({
   flex: 1,
   overflow: 'hidden'
@@ -17429,9 +17428,6 @@ var HeaderTabItem$1 = index$9(reactNative.View)(function (_ref2) {
     paddingVertical: theme.__hd__.tabs.space.itemVerticalPadding
   };
 });
-var ContentWrapper$1 = index$9(AnimatedPagerView)({
-  flex: 1
-});
 index$9(reactNative.View)({
   flex: 1
 });
@@ -17479,9 +17475,6 @@ var TabContainer = index$9(reactNative.View)({
   flex: 1,
   overflow: 'hidden'
 });
-var ContentWrapper = index$9(PagerView__default["default"])({
-  flex: 1
-});
 var HeaderTabWrapper = index$9(reactNative.View)(function (_ref) {
   var themeInsets = _ref.themeInsets;
   return {
@@ -17932,7 +17925,8 @@ var ScrollableTab = function ScrollableTab(_ref) {
     insets: insets,
     testID: componentTestID ? "".concat(componentTestID, "-tab-bar") : undefined,
     variant: variant
-  }), /*#__PURE__*/React__default["default"].createElement(ContentWrapper, {
+  }), /*#__PURE__*/React__default["default"].createElement(PagerView__default["default"], {
+    useNext: true,
     initialPage: selectedTabIndex,
     ref: pagerViewRef,
     onPageScrollStateChanged: function onPageScrollStateChanged(e) {
@@ -17949,7 +17943,10 @@ var ScrollableTab = function ScrollableTab(_ref) {
         });
       }
     },
-    scrollEnabled: swipeEnabled
+    scrollEnabled: swipeEnabled,
+    style: {
+      flex: 1
+    }
   }, tabs.map(function (tab, index) {
     var key = tab.key,
       component = tab.component,
@@ -17967,6 +17964,7 @@ var ScrollableTab = function ScrollableTab(_ref) {
   }))));
 };
 
+var AnimatedPagerView = reactNative.Animated.createAnimatedComponent(PagerView__default["default"]);
 var getTabItem = function getTabItem(_ref) {
   var item = _ref.item,
     color = _ref.color,
@@ -18064,7 +18062,8 @@ var Tabs = function Tabs(_ref2) {
     scrollOffsetAnimatedValue: scrollOffsetAnimatedValue,
     tabsLength: tabs.length,
     tabsWidth: tabsWidth
-  }))), /*#__PURE__*/React__default["default"].createElement(ContentWrapper$1, {
+  }))), /*#__PURE__*/React__default["default"].createElement(AnimatedPagerView, {
+    useNext: true,
     initialPage: selectedTabIndex,
     ref: pagerViewRef,
     onPageSelected: function onPageSelected(e) {
@@ -18082,7 +18081,10 @@ var Tabs = function Tabs(_ref2) {
     }], {
       useNativeDriver: true
     }),
-    scrollEnabled: swipeEnabled
+    scrollEnabled: swipeEnabled,
+    style: {
+      flex: 1
+    }
   }, tabs.map(function (tab, index) {
     var key = tab.key,
       component = tab.component,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.63.0",
+  "version": "8.63.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -28,17 +28,17 @@
     "nanoid": "^4.0.2"
   },
   "peerDependencies": {
-    "@hero-design/react-native-month-year-picker": "^8.42.8",
+    "@hero-design/react-native-month-year-picker": "^8.42.9",
     "@react-native-community/datetimepicker": "^3.5.2 || ^7.2.0",
-    "@react-native-community/slider": "4.4.3",
+    "@react-native-community/slider": "^4.5.1",
     "react": "18.2.0",
-    "react-native": "^0.72.11",
-    "react-native-gesture-handler": "^1.10.3 || ~2.5.0",
-    "react-native-linear-gradient": "^2.6.2",
-    "react-native-pager-view": "^5.4.25",
-    "react-native-safe-area-context": "^3.0.2",
+    "react-native": "^0.73.8",
+    "react-native-gesture-handler": "^2.15.0",
+    "react-native-linear-gradient": "^2.8.3",
+    "react-native-pager-view": "^6.2.1",
+    "react-native-safe-area-context": "^4.7.0",
     "react-native-vector-icons": "^9.1.0",
-    "react-native-webview": "^11.2.5"
+    "react-native-webview": "^13.10.2"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
@@ -48,9 +48,9 @@
     "@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.8",
+    "@hero-design/react-native-month-year-picker": "^8.42.9",
     "@react-native-community/datetimepicker": "7.2.0",
-    "@react-native-community/slider": "4.4.3",
+    "@react-native-community/slider": "^4.5.1",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-json": "^4.1.0",
@@ -75,13 +75,13 @@
     "prettier-config-hd": "8.42.4",
     "react": "18.2.0",
     "react-dom": "^18.2.0",
-    "react-native": "0.72.11",
-    "react-native-gesture-handler": "~2.5.0",
-    "react-native-linear-gradient": "^2.6.2",
-    "react-native-pager-view": "^5.4.25",
-    "react-native-safe-area-context": "^3.0.2",
+    "react-native": "0.73.8",
+    "react-native-gesture-handler": "^2.15.0",
+    "react-native-linear-gradient": "2.8.3",
+    "react-native-pager-view": "^6.2.1",
+    "react-native-safe-area-context": "^4.7.0",
     "react-native-vector-icons": "^9.1.0",
-    "react-native-webview": "^11.2.5",
+    "react-native-webview": "13.10.3",
     "react-test-renderer": "18.2.0",
     "rollup": "^2.68.0",
     "rollup-plugin-copy": "^3.4.0",

package/src/components/AnimatedScroller/__tests__/__snapshots__/ScrollablesWithFAB.spec.tsx.snap

@@ -900,13 +900,6 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders ActionGr
         </View>
       </View>
     </View>
-    <Modal
-      animationType="fade"
-      hardwareAccelerated={false}
-      statusBarTranslucent={true}
-      transparent={true}
-      visible={false}
-    />
   </View>
   <View
     pointerEvents="box-none"
@@ -2069,13 +2062,6 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders Action
         </View>
       </View>
     </View>
-    <Modal
-      animationType="fade"
-      hardwareAccelerated={false}
-      statusBarTranslucent={true}
-      transparent={true}
-      visible={false}
-    />
   </View>
   <View
     pointerEvents="box-none"
@@ -2885,13 +2871,6 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders Actio
         </View>
       </View>
     </View>
-    <Modal
-      animationType="fade"
-      hardwareAccelerated={false}
-      statusBarTranslucent={true}
-      transparent={true}
-      visible={false}
-    />
   </View>
   <View
     pointerEvents="box-none"

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

@@ -8,12 +8,6 @@ exports[`BottomSheet renders correctly with BottomSheet.ScrollView 1`] = `
     }
   }
 >
-  <Modal
-    hardwareAccelerated={false}
-    onRequestClose={[MockFunction]}
-    transparent={true}
-    visible={false}
-  />
   <View
     pointerEvents="box-none"
     position="bottom"
@@ -45,12 +39,6 @@ exports[`BottomSheet renders correctly with close state 1`] = `
     }
   }
 >
-  <Modal
-    hardwareAccelerated={false}
-    onRequestClose={[MockFunction]}
-    transparent={true}
-    visible={false}
-  />
   <View
     pointerEvents="box-none"
     position="bottom"

package/src/components/DatePicker/__tests__/__snapshots__/DatePicker.spec.tsx.snap

@@ -538,12 +538,6 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
         </View>
       </View>
     </View>
-    <Modal
-      hardwareAccelerated={false}
-      onRequestClose={[Function]}
-      transparent={true}
-      visible={false}
-    />
   </View>
   <View
     pointerEvents="box-none"
@@ -825,12 +819,6 @@ exports[`DatePicker renders variant Calendar 1`] = `
         </View>
       </View>
     </View>
-    <Modal
-      hardwareAccelerated={false}
-      onRequestClose={[Function]}
-      transparent={true}
-      visible={false}
-    />
   </View>
   <View
     pointerEvents="box-none"

package/src/components/FAB/ActionGroup/__tests__/__snapshots__/index.spec.tsx.snap

@@ -158,13 +158,6 @@ exports[`ActionGroup has active false 1`] = `
         </View>
       </View>
     </View>
-    <Modal
-      animationType="fade"
-      hardwareAccelerated={false}
-      statusBarTranslucent={true}
-      transparent={true}
-      visible={false}
-    />
   </View>
   <View
     pointerEvents="box-none"

package/src/components/RichTextEditor/__tests__/__snapshots__/MentionList.spec.tsx.snap

@@ -31,7 +31,7 @@ exports[`MentionList when search string is not empty should render mention list
       onScrollEndDrag={[Function]}
       removeClippedSubviews={false}
       renderItem={[Function]}
-      scrollEventThrottle={50}
+      scrollEventThrottle={0.0001}
       stickyHeaderIndices={[]}
       viewabilityConfigCallbackPairs={[]}
     >

package/src/components/Select/MultiSelect/__tests__/__snapshots__/OptionList.spec.tsx.snap

@@ -61,7 +61,7 @@ exports[`OptionList render isLoading correctly 1`] = `
     onScrollBeginDrag={[Function]}
     onScrollEndDrag={[Function]}
     renderItem={[Function]}
-    scrollEventThrottle={50}
+    scrollEventThrottle={0.0001}
     stickyHeaderIndices={
       [
         0,
@@ -935,7 +935,7 @@ exports[`OptionList renders correctly 1`] = `
     onScrollBeginDrag={[Function]}
     onScrollEndDrag={[Function]}
     renderItem={[Function]}
-    scrollEventThrottle={50}
+    scrollEventThrottle={0.0001}
     stickyHeaderIndices={
       [
         0,
@@ -1656,7 +1656,7 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
     onScrollBeginDrag={[Function]}
     onScrollEndDrag={[Function]}
     renderItem={[Function]}
-    scrollEventThrottle={50}
+    scrollEventThrottle={0.0001}
     stickyHeaderIndices={
       [
         0,
@@ -2405,7 +2405,7 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
     onScrollBeginDrag={[Function]}
     onScrollEndDrag={[Function]}
     renderItem={[Function]}
-    scrollEventThrottle={50}
+    scrollEventThrottle={0.0001}
     stickyHeaderIndices={
       [
         0,

package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap

@@ -533,7 +533,7 @@ exports[`rendering allows custom renderer 1`] = `
             onScrollEndDrag={[Function]}
             onScrollToIndexFailed={[Function]}
             renderItem={[Function]}
-            scrollEventThrottle={50}
+            scrollEventThrottle={0.0001}
             stickyHeaderIndices={
               [
                 0,
@@ -1795,12 +1795,6 @@ exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
       </View>
     </View>
   </View>
-  <Modal
-    hardwareAccelerated={false}
-    onRequestClose={[Function]}
-    transparent={true}
-    visible={false}
-  />
   <View
     pointerEvents="box-none"
     position="bottom"
@@ -2361,7 +2355,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
             onScrollEndDrag={[Function]}
             onScrollToIndexFailed={[Function]}
             renderItem={[Function]}
-            scrollEventThrottle={50}
+            scrollEventThrottle={0.0001}
             stickyHeaderIndices={
               [
                 0,
@@ -3838,12 +3832,6 @@ exports[`rendering renders correctly when input is loading 1`] = `
       </View>
     </View>
   </View>
-  <Modal
-    hardwareAccelerated={false}
-    onRequestClose={[Function]}
-    transparent={true}
-    visible={false}
-  />
   <View
     pointerEvents="box-none"
     position="bottom"
@@ -4392,7 +4380,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
             onScrollEndDrag={[Function]}
             onScrollToIndexFailed={[Function]}
             renderItem={[Function]}
-            scrollEventThrottle={50}
+            scrollEventThrottle={0.0001}
             stickyHeaderIndices={
               [
                 0,
@@ -5710,7 +5698,7 @@ exports[`rendering renders correctly when receives sections 2`] = `
             onScrollEndDrag={[Function]}
             onScrollToIndexFailed={[Function]}
             renderItem={[Function]}
-            scrollEventThrottle={50}
+            scrollEventThrottle={0.0001}
             stickyHeaderIndices={
               [
                 0,

package/src/components/Select/SingleSelect/__tests__/__snapshots__/OptionList.spec.tsx.snap

@@ -61,7 +61,7 @@ exports[`OptionList render isLoading correctly 1`] = `
     onScrollBeginDrag={[Function]}
     onScrollEndDrag={[Function]}
     renderItem={[Function]}
-    scrollEventThrottle={50}
+    scrollEventThrottle={0.0001}
     stickyHeaderIndices={
       [
         0,
@@ -912,7 +912,7 @@ exports[`OptionList renders correctly 1`] = `
     onScrollBeginDrag={[Function]}
     onScrollEndDrag={[Function]}
     renderItem={[Function]}
-    scrollEventThrottle={50}
+    scrollEventThrottle={0.0001}
     stickyHeaderIndices={
       [
         0,
@@ -1610,7 +1610,7 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
     onScrollBeginDrag={[Function]}
     onScrollEndDrag={[Function]}
     renderItem={[Function]}
-    scrollEventThrottle={50}
+    scrollEventThrottle={0.0001}
     stickyHeaderIndices={
       [
         0,
@@ -2308,7 +2308,7 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
     onScrollBeginDrag={[Function]}
     onScrollEndDrag={[Function]}
     renderItem={[Function]}
-    scrollEventThrottle={50}
+    scrollEventThrottle={0.0001}
     stickyHeaderIndices={
       [
         0,

package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap

@@ -532,7 +532,7 @@ exports[`rendering allows custom renderer 1`] = `
             onScrollEndDrag={[Function]}
             onScrollToIndexFailed={[Function]}
             renderItem={[Function]}
-            scrollEventThrottle={50}
+            scrollEventThrottle={0.0001}
             stickyHeaderIndices={
               [
                 0,
@@ -1710,12 +1710,6 @@ exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
       </View>
     </View>
   </View>
-  <Modal
-    hardwareAccelerated={false}
-    onRequestClose={[Function]}
-    transparent={true}
-    visible={false}
-  />
   <View
     pointerEvents="box-none"
     position="bottom"
@@ -2276,7 +2270,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
             onScrollEndDrag={[Function]}
             onScrollToIndexFailed={[Function]}
             renderItem={[Function]}
-            scrollEventThrottle={50}
+            scrollEventThrottle={0.0001}
             stickyHeaderIndices={
               [
                 0,
@@ -3613,12 +3607,6 @@ exports[`rendering renders correctly when input is loading 1`] = `
       </View>
     </View>
   </View>
-  <Modal
-    hardwareAccelerated={false}
-    onRequestClose={[Function]}
-    transparent={true}
-    visible={false}
-  />
   <View
     pointerEvents="box-none"
     position="bottom"
@@ -4167,7 +4155,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
             onScrollEndDrag={[Function]}
             onScrollToIndexFailed={[Function]}
             renderItem={[Function]}
-            scrollEventThrottle={50}
+            scrollEventThrottle={0.0001}
             stickyHeaderIndices={
               [
                 0,

package/src/components/Tabs/ScrollableTabs.tsx

@@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import PagerView from 'react-native-pager-view';
-import { TabContainer, ContentWrapper } from './StyledScrollableTabs';
+import { TabContainer } from './StyledScrollableTabs';
 import type { TabsProps } from '.';
 import SceneView from './SceneView';
 import ScrollableTabHeader from './ScrollableTabsHeader/ScrollableTabsHeader';
@@ -68,7 +68,8 @@ const ScrollableTab = ({
           testID={componentTestID ? `${componentTestID}-tab-bar` : undefined}
           variant={variant}
         />
-        <ContentWrapper
+        <PagerView
+          useNext
           initialPage={selectedTabIndex}
           ref={pagerViewRef}
           onPageScrollStateChanged={(e) => {
@@ -89,6 +90,7 @@ const ScrollableTab = ({
             }
           }}
           scrollEnabled={swipeEnabled}
+          style={{ flex: 1 }}
         >
           {tabs.map((tab, index) => {
             const { key, component, testID } = tab;
@@ -107,7 +109,7 @@ const ScrollableTab = ({
               </ScreenContext.Provider>
             );
           })}
-        </ContentWrapper>
+        </PagerView>
       </TabContainer>
     </TabContext.Provider>
   );

package/src/components/Tabs/StyledScrollableTabs.tsx

@@ -1,6 +1,5 @@
 import { Animated, StyleSheet, View } from 'react-native';
 import styled from '@emotion/native';
-import PagerView from 'react-native-pager-view';
 
 const TabScreen = styled(View)({
   flex: 1,
@@ -11,10 +10,6 @@ const TabContainer = styled(View)({
   overflow: 'hidden',
 });
 
-const ContentWrapper = styled(PagerView)({
-  flex: 1,
-});
-
 const HeaderTabWrapper = styled(View)<{
   themeInsets: { top: number; right: number; bottom: number; left: number };
 }>(({ themeInsets }) => ({
@@ -64,7 +59,6 @@ export {
   TabScreen,
   TabContainer,
   HeaderTabWrapper,
-  ContentWrapper,
   HeaderTabItemOutlineWrapper,
   HeaderTabItemOutline,
   HeaderTabItemWrapper,

package/src/components/Tabs/StyledTabs.tsx

@@ -1,8 +1,5 @@
 import styled from '@emotion/native';
 import { Animated, View } from 'react-native';
-import PagerView from 'react-native-pager-view';
-
-const AnimatedPagerView = Animated.createAnimatedComponent(PagerView);
 
 const TabContainer = styled(View)({
   flex: 1,
@@ -27,10 +24,6 @@ const HeaderTabItem = styled(View)(({ theme }) => ({
   paddingVertical: theme.__hd__.tabs.space.itemVerticalPadding,
 }));
 
-const ContentWrapper = styled(AnimatedPagerView)({
-  flex: 1,
-});
-
 const TabScreen = styled(View)({
   flex: 1,
 });
@@ -55,7 +48,6 @@ export {
   HeaderTabWrapper,
   HeaderTab,
   HeaderTabItem,
-  ContentWrapper,
   TabScreen,
   StyledIndicator,
   StyledBadgeWrapper,