@hero-design/rn 8.63.2-alpha.2 → 8.63.2-alpha.3

package/es/index.js

@@ -8423,7 +8423,7 @@ var BottomNavigationContainer = index$9(View)({
   flex: 1,
   overflow: 'hidden'
 });
-var ContentWrapper = index$9(View)({
+var ContentWrapper$2 = 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, null, tabs.map(function (tab) {
+  return /*#__PURE__*/React__default.createElement(BottomNavigationContainer, nativeProps, /*#__PURE__*/React__default.createElement(ContentWrapper$2, null, tabs.map(function (tab) {
     var key = tab.key,
       component = tab.component,
       testID = tab.testID;
@@ -17374,6 +17374,7 @@ var index$3 = Object.assign(Switch, {
   Selector: SelectorSwitch
 });
 
+var AnimatedPagerView = Animated.createAnimatedComponent(PagerView);
 var TabContainer$1 = index$9(View)({
   flex: 1,
   overflow: 'hidden'
@@ -17398,6 +17399,9 @@ 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
 });
@@ -17445,6 +17449,10 @@ var TabContainer = index$9(View)({
   flex: 1,
   overflow: 'hidden'
 });
+// @ts-expect-error: Test
+var ContentWrapper = index$9(PagerView)({
+  flex: 1
+});
 var HeaderTabWrapper = index$9(View)(function (_ref) {
   var themeInsets = _ref.themeInsets;
   return {
@@ -17838,7 +17846,6 @@ var useIsFocused = function useIsFocused() {
   return isFocused;
 };
 
-var AnimatedPagerView$1 = Animated.createAnimatedComponent(PagerView);
 var ScrollableTab = function ScrollableTab(_ref) {
   var onTabPress = _ref.onTabPress,
     selectedTabKey = _ref.selectedTabKey,
@@ -17896,8 +17903,7 @@ var ScrollableTab = function ScrollableTab(_ref) {
     insets: insets,
     testID: componentTestID ? "".concat(componentTestID, "-tab-bar") : undefined,
     variant: variant
-  }), /*#__PURE__*/React__default.createElement(AnimatedPagerView$1, {
-    useNext: true,
+  }), /*#__PURE__*/React__default.createElement(ContentWrapper, {
     initialPage: selectedTabIndex,
     ref: pagerViewRef,
     onPageScrollStateChanged: function onPageScrollStateChanged(e) {
@@ -17914,10 +17920,7 @@ var ScrollableTab = function ScrollableTab(_ref) {
         });
       }
     },
-    scrollEnabled: swipeEnabled,
-    style: {
-      flex: 1
-    }
+    scrollEnabled: swipeEnabled
   }, tabs.map(function (tab, index) {
     var key = tab.key,
       component = tab.component,
@@ -17935,7 +17938,6 @@ var ScrollableTab = function ScrollableTab(_ref) {
   }))));
 };
 
-var AnimatedPagerView = Animated.createAnimatedComponent(PagerView);
 var getTabItem = function getTabItem(_ref) {
   var item = _ref.item,
     color = _ref.color,
@@ -18033,8 +18035,7 @@ var Tabs = function Tabs(_ref2) {
     scrollOffsetAnimatedValue: scrollOffsetAnimatedValue,
     tabsLength: tabs.length,
     tabsWidth: tabsWidth
-  }))), /*#__PURE__*/React__default.createElement(AnimatedPagerView, {
-    useNext: true,
+  }))), /*#__PURE__*/React__default.createElement(ContentWrapper$1, {
     initialPage: selectedTabIndex,
     ref: pagerViewRef,
     onPageSelected: function onPageSelected(e) {
@@ -18052,10 +18053,7 @@ var Tabs = function Tabs(_ref2) {
     }], {
       useNativeDriver: true
     }),
-    scrollEnabled: swipeEnabled,
-    style: {
-      flex: 1
-    }
+    scrollEnabled: swipeEnabled
   }, 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 = index$9(reactNative.View)({
+var ContentWrapper$2 = 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, null, tabs.map(function (tab) {
+  return /*#__PURE__*/React__default["default"].createElement(BottomNavigationContainer, nativeProps, /*#__PURE__*/React__default["default"].createElement(ContentWrapper$2, null, tabs.map(function (tab) {
     var key = tab.key,
       component = tab.component,
       testID = tab.testID;
@@ -17404,6 +17404,7 @@ 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'
@@ -17428,6 +17429,9 @@ 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
 });
@@ -17475,6 +17479,10 @@ var TabContainer = index$9(reactNative.View)({
   flex: 1,
   overflow: 'hidden'
 });
+// @ts-expect-error: Test
+var ContentWrapper = index$9(PagerView__default["default"])({
+  flex: 1
+});
 var HeaderTabWrapper = index$9(reactNative.View)(function (_ref) {
   var themeInsets = _ref.themeInsets;
   return {
@@ -17868,7 +17876,6 @@ var useIsFocused = function useIsFocused() {
   return isFocused;
 };
 
-var AnimatedPagerView$1 = reactNative.Animated.createAnimatedComponent(PagerView__default["default"]);
 var ScrollableTab = function ScrollableTab(_ref) {
   var onTabPress = _ref.onTabPress,
     selectedTabKey = _ref.selectedTabKey,
@@ -17926,8 +17933,7 @@ var ScrollableTab = function ScrollableTab(_ref) {
     insets: insets,
     testID: componentTestID ? "".concat(componentTestID, "-tab-bar") : undefined,
     variant: variant
-  }), /*#__PURE__*/React__default["default"].createElement(AnimatedPagerView$1, {
-    useNext: true,
+  }), /*#__PURE__*/React__default["default"].createElement(ContentWrapper, {
     initialPage: selectedTabIndex,
     ref: pagerViewRef,
     onPageScrollStateChanged: function onPageScrollStateChanged(e) {
@@ -17944,10 +17950,7 @@ var ScrollableTab = function ScrollableTab(_ref) {
         });
       }
     },
-    scrollEnabled: swipeEnabled,
-    style: {
-      flex: 1
-    }
+    scrollEnabled: swipeEnabled
   }, tabs.map(function (tab, index) {
     var key = tab.key,
       component = tab.component,
@@ -17965,7 +17968,6 @@ 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,
@@ -18063,8 +18065,7 @@ var Tabs = function Tabs(_ref2) {
     scrollOffsetAnimatedValue: scrollOffsetAnimatedValue,
     tabsLength: tabs.length,
     tabsWidth: tabsWidth
-  }))), /*#__PURE__*/React__default["default"].createElement(AnimatedPagerView, {
-    useNext: true,
+  }))), /*#__PURE__*/React__default["default"].createElement(ContentWrapper$1, {
     initialPage: selectedTabIndex,
     ref: pagerViewRef,
     onPageSelected: function onPageSelected(e) {
@@ -18082,10 +18083,7 @@ var Tabs = function Tabs(_ref2) {
     }], {
       useNativeDriver: true
     }),
-    scrollEnabled: swipeEnabled,
-    style: {
-      flex: 1
-    }
+    scrollEnabled: swipeEnabled
   }, 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.2-alpha.2",
+  "version": "8.63.2-alpha.3",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -89,5 +89,6 @@
     "ts-jest": "^29.1.1",
     "typescript": "4.8.4"
   },
-  "prettier": "prettier-config-hd"
+  "prettier": "prettier-config-hd",
+  "react-native": "src/index.ts"
 }

package/src/components/Tabs/ScrollableTabs.tsx

@@ -1,8 +1,7 @@
 import React, { useRef } from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import PagerView from 'react-native-pager-view';
-import { Animated } from 'react-native';
-import { TabContainer } from './StyledScrollableTabs';
+import { TabContainer, ContentWrapper } from './StyledScrollableTabs';
 import type { TabsProps } from '.';
 import SceneView from './SceneView';
 import ScrollableTabHeader from './ScrollableTabsHeader/ScrollableTabsHeader';
@@ -12,8 +11,6 @@ export interface ScrollableTabProps extends TabsProps {
   variant?: 'underlined' | 'highlighted';
 }
 
-const AnimatedPagerView = Animated.createAnimatedComponent(PagerView);
-
 const ScrollableTab = ({
   onTabPress,
   selectedTabKey,
@@ -71,8 +68,8 @@ const ScrollableTab = ({
           testID={componentTestID ? `${componentTestID}-tab-bar` : undefined}
           variant={variant}
         />
-        <AnimatedPagerView
-          useNext
+        {/* @ts-expect-error: Test */}
+        <ContentWrapper
           initialPage={selectedTabIndex}
           ref={pagerViewRef}
           onPageScrollStateChanged={(e) => {
@@ -93,7 +90,6 @@ const ScrollableTab = ({
             }
           }}
           scrollEnabled={swipeEnabled}
-          style={{ flex: 1 }}
         >
           {tabs.map((tab, index) => {
             const { key, component, testID } = tab;
@@ -112,7 +108,7 @@ const ScrollableTab = ({
               </ScreenContext.Provider>
             );
           })}
-        </AnimatedPagerView>
+        </ContentWrapper>
       </TabContainer>
     </TabContext.Provider>
   );

package/src/components/Tabs/StyledScrollableTabs.tsx

@@ -1,5 +1,6 @@
 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,
@@ -10,6 +11,10 @@ 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 }) => ({
@@ -59,6 +64,7 @@ export {
   TabScreen,
   TabContainer,
   HeaderTabWrapper,
+  ContentWrapper,
   HeaderTabItemOutlineWrapper,
   HeaderTabItemOutline,
   HeaderTabItemWrapper,

package/src/components/Tabs/StyledTabs.tsx

@@ -1,5 +1,8 @@
 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,
@@ -24,6 +27,10 @@ const HeaderTabItem = styled(View)(({ theme }) => ({
   paddingVertical: theme.__hd__.tabs.space.itemVerticalPadding,
 }));
 
+const ContentWrapper = styled(AnimatedPagerView)({
+  flex: 1,
+});
+
 const TabScreen = styled(View)({
   flex: 1,
 });
@@ -48,6 +55,7 @@ export {
   HeaderTabWrapper,
   HeaderTab,
   HeaderTabItem,
+  ContentWrapper,
   TabScreen,
   StyledIndicator,
   StyledBadgeWrapper,

package/src/components/Tabs/index.tsx

@@ -12,6 +12,7 @@ import ActiveTabIndicator from './ActiveTabIndicator';
 import SceneView from './SceneView';
 import ScrollableTabs from './ScrollableTabs';
 import {
+  ContentWrapper,
   HeaderTab,
   HeaderTabItem,
   HeaderTabWrapper,
@@ -77,8 +78,6 @@ export interface TabsProps extends ViewProps {
   testID?: string;
 }
 
-const AnimatedPagerView = Animated.createAnimatedComponent(PagerView);
-
 const getTabItem = ({
   item,
   color,
@@ -194,8 +193,8 @@ const Tabs = ({
             />
           </View>
         </HeaderTabWrapper>
-        <AnimatedPagerView
-          useNext
+        {/* @ts-expect-error: Test */}
+        <ContentWrapper
           initialPage={selectedTabIndex}
           ref={pagerViewRef}
           onPageSelected={(e) => {
@@ -219,7 +218,6 @@ const Tabs = ({
             }
           )}
           scrollEnabled={swipeEnabled}
-          style={{ flex: 1 }}
         >
           {tabs.map((tab, index) => {
             const { key, component, testID } = tab;
@@ -239,7 +237,7 @@ const Tabs = ({
               </ScreenContext.Provider>
             );
           })}
-        </AnimatedPagerView>
+        </ContentWrapper>
       </TabContainer>
     </TabContext.Provider>
   );