@hero-design/rn 8.24.0-alpha.0 → 8.24.0

package/lib/index.js

@@ -14968,7 +14968,7 @@ var StyledSuccessModal = index$a(reactNative.Modal)({
   width: '100%'
 });
 
-var _excluded$2 = ["variant", "title", "description", "image", "testID", "ctaText", "onCtaPress"];
+var _excluded$2 = ["variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress"];
 var renderImage = function renderImage(image) {
   if ( /*#__PURE__*/React.isValidElement(image)) {
     return /*#__PURE__*/React__default["default"].cloneElement(image, {
@@ -14992,13 +14992,20 @@ var SuccessPage = function SuccessPage(_ref) {
     ctaText = _ref.ctaText,
     _ref$onCtaPress = _ref.onCtaPress,
     onCtaPress = _ref$onCtaPress === void 0 ? noop$1 : _ref$onCtaPress,
+    secondaryCtaText = _ref.secondaryCtaText,
+    onSecondaryCtaPress = _ref.onSecondaryCtaPress,
     nativeProps = _objectWithoutProperties(_ref, _excluded$2);
+  var showSecondaryButton = secondaryCtaText && onSecondaryCtaPress;
   return /*#__PURE__*/React__default["default"].createElement(StyledSuccessContainer, _extends$1({
     testID: testID,
     themeVariant: variant
   }, nativeProps), /*#__PURE__*/React__default["default"].createElement(StyledSuccessContent, null, !!image && /*#__PURE__*/React__default["default"].createElement(StyledSuccessImageContainer, null, renderImage(image)), /*#__PURE__*/React__default["default"].createElement(StyledSuccessTitle, null, title), !!description && /*#__PURE__*/React__default["default"].createElement(StyledSuccessDescription, null, description)), !!ctaText && /*#__PURE__*/React__default["default"].createElement(StyledSuccessButtonContainer, null, /*#__PURE__*/React__default["default"].createElement(StyledSuccessButtonPrimary, {
     text: ctaText,
     onPress: onCtaPress
+  }), !!showSecondaryButton && /*#__PURE__*/React__default["default"].createElement(StyledSuccessButtonPrimary, {
+    variant: "text",
+    text: secondaryCtaText,
+    onPress: onSecondaryCtaPress
   })));
 };
 /**
@@ -15213,7 +15220,7 @@ var HeaderTabItem$1 = index$a(reactNative.View)(function (_ref2) {
 var ContentWrapper$1 = index$a(AnimatedPagerView)({
   flex: 1
 });
-var TabScreen$1 = index$a(reactNative.View)({
+index$a(reactNative.View)({
   flex: 1
 });
 var StyledIndicator = index$a(reactNative.Animated.View)(function (_ref3) {
@@ -15302,6 +15309,48 @@ var HeaderTabItemWrapper = index$a(reactNative.View)(function (_ref5) {
   };
 });
 
+var SceneView = function SceneView(_ref) {
+  var _ref$lazy = _ref.lazy,
+    lazy = _ref$lazy === void 0 ? false : _ref$lazy,
+    _ref$lazyPreloadDista = _ref.lazyPreloadDistance,
+    lazyPreloadDistance = _ref$lazyPreloadDista === void 0 ? 1 : _ref$lazyPreloadDista,
+    children = _ref.children,
+    index = _ref.index,
+    selectedIndex = _ref.selectedIndex,
+    testID = _ref.testID;
+  var _React$useState = React__default["default"].useState(Math.abs(selectedIndex - index) > lazyPreloadDistance),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isLoading = _React$useState2[0],
+    setIsLoading = _React$useState2[1];
+  var focused = index === selectedIndex;
+  if (isLoading && Math.abs(selectedIndex - index) <= lazyPreloadDistance) {
+    // Always render the route when it becomes focused
+    setIsLoading(false);
+  }
+  React__default["default"].useEffect(function () {
+    var timer;
+    if (!lazy && isLoading) {
+      // If lazy mode is not enabled, render the scene with a delay if not loaded already
+      // This improves the initial startup time as the scene is no longer blocking
+      timer = setTimeout(function () {
+        return setIsLoading(false);
+      }, 0);
+    }
+    return function () {
+      clearTimeout(timer);
+    };
+  }, [index, isLoading, lazy, focused]);
+  return /*#__PURE__*/React__default["default"].createElement(TabScreen, {
+    accessibilityElementsHidden: !focused,
+    importantForAccessibility: focused ? 'auto' : 'no-hide-descendants',
+    style: [{
+      flex: 1,
+      overflow: 'hidden'
+    }, focused ? reactNative.StyleSheet.absoluteFill : null],
+    testID: testID
+  }, focused || !isLoading ? children : null);
+};
+
 var useAnimatedValueArray = function useAnimatedValueArray(initialValues) {
   var refs = React__default["default"].useRef([]);
   refs.current.length = initialValues.length;
@@ -15472,124 +15521,6 @@ var ScrollableTabHeader = function ScrollableTabHeader(_ref2) {
   }));
 };
 
-var ScrollableTab$1 = function ScrollableTab(_ref) {
-  var onTabPress = _ref.onTabPress,
-    selectedTabKey = _ref.selectedTabKey,
-    tabs = _ref.tabs,
-    containerStyle = _ref.containerStyle,
-    barStyle = _ref.barStyle,
-    _ref$lazy = _ref.lazy,
-    lazy = _ref$lazy === void 0 ? false : _ref$lazy,
-    _ref$lazyPreloadDista = _ref.lazyPreloadDistance,
-    lazyPreloadDistance = _ref$lazyPreloadDista === void 0 ? 1 : _ref$lazyPreloadDista,
-    _ref$swipeEnabled = _ref.swipeEnabled,
-    swipeEnabled = _ref$swipeEnabled === void 0 ? true : _ref$swipeEnabled,
-    componentTestID = _ref.testID;
-  var pagerViewRef = React__default["default"].useRef(null);
-  var insets = reactNativeSafeAreaContext.useSafeAreaInsets();
-  var selectedTabIndex = tabs.findIndex(function (item) {
-    return item.key === selectedTabKey;
-  });
-  React__default["default"].useEffect(function () {
-    var timeoutHandle = null;
-    if (selectedTabIndex !== -1) {
-      // 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);
-    }
-    return function () {
-      if (timeoutHandle) {
-        clearTimeout(timeoutHandle);
-      }
-    };
-  }, [selectedTabIndex, pagerViewRef]);
-  return /*#__PURE__*/React__default["default"].createElement(TabContainer, {
-    style: containerStyle,
-    testID: componentTestID
-  }, /*#__PURE__*/React__default["default"].createElement(ScrollableTabHeader, {
-    tabs: tabs,
-    selectedIndex: selectedTabIndex,
-    onTabPress: onTabPress,
-    barStyle: barStyle,
-    insets: insets,
-    testID: componentTestID ? "".concat(componentTestID, "-tab-bar") : undefined
-  }), /*#__PURE__*/React__default["default"].createElement(ContentWrapper, {
-    initialPage: selectedTabIndex,
-    ref: pagerViewRef,
-    onPageSelected: function onPageSelected(e) {
-      var index = e.nativeEvent.position;
-      var selectedItem = tabs[index];
-      if (selectedItem) {
-        onTabPress(selectedItem.key);
-      }
-    },
-    scrollEnabled: swipeEnabled
-  }, tabs.map(function (tab, index) {
-    var key = tab.key,
-      component = tab.component,
-      testID = tab.testID;
-    var active = selectedTabKey === key;
-    var isLazyScreen = lazy && Math.abs(selectedTabIndex - index) > lazyPreloadDistance;
-    return /*#__PURE__*/React__default["default"].createElement(TabScreen, {
-      key: key,
-      testID: testID ? "tab-screen-".concat(testID) : undefined,
-      pointerEvents: active ? 'auto' : 'none',
-      accessibilityElementsHidden: !active,
-      importantForAccessibility: active ? 'auto' : 'no-hide-descendants',
-      collapsable: false
-    }, isLazyScreen ? null : component);
-  })));
-};
-
-var SceneView = function SceneView(_ref) {
-  var _ref$lazy = _ref.lazy,
-    lazy = _ref$lazy === void 0 ? false : _ref$lazy,
-    _ref$lazyPreloadDista = _ref.lazyPreloadDistance,
-    lazyPreloadDistance = _ref$lazyPreloadDista === void 0 ? 1 : _ref$lazyPreloadDista,
-    children = _ref.children,
-    index = _ref.index,
-    selectedIndex = _ref.selectedIndex,
-    focused = _ref.focused,
-    testID = _ref.testID;
-  var _React$useState = React__default["default"].useState(Math.abs(selectedIndex - index) > lazyPreloadDistance),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    isLoading = _React$useState2[0],
-    setIsLoading = _React$useState2[1];
-  if (isLoading && Math.abs(selectedIndex - index) <= lazyPreloadDistance) {
-    // Always render the route when it becomes focused
-    setIsLoading(false);
-  }
-  if (lazy && isLoading) {
-    console.error('Lazy loading is not supported in this version of Tabs');
-  }
-  React__default["default"].useEffect(function () {
-    var timer;
-    if (!lazy && isLoading) {
-      // If lazy mode is not enabled, render the scene with a delay if not loaded already
-      // This improves the initial startup time as the scene is no longer blocking
-      timer = setTimeout(function () {
-        return setIsLoading(false);
-      }, 0);
-    }
-    return function () {
-      clearTimeout(timer);
-    };
-  }, [index, isLoading, lazy, focused]);
-  return /*#__PURE__*/React__default["default"].createElement(TabScreen, {
-    accessibilityElementsHidden: !focused,
-    importantForAccessibility: focused ? 'auto' : 'no-hide-descendants',
-    style: [{
-      flex: 1,
-      overflow: 'hidden'
-    }, focused ? reactNative.StyleSheet.absoluteFill : null],
-    testID: testID
-  }, focused || !isLoading ? children : null);
-};
-
 var TabContext = /*#__PURE__*/React__default["default"].createContext(null);
 var ScreenContext = /*#__PURE__*/React__default["default"].createContext(null);
 var useIsFocused = function useIsFocused() {
@@ -15601,6 +15532,7 @@ var useIsFocused = function useIsFocused() {
   var isFocused = context.selectedTabKey === key;
   return isFocused;
 };
+
 var ScrollableTab = function ScrollableTab(_ref) {
   var onTabPress = _ref.onTabPress,
     selectedTabKey = _ref.selectedTabKey,
@@ -15636,7 +15568,6 @@ var ScrollableTab = function ScrollableTab(_ref) {
       }
     };
   }, [selectedTabIndex, pagerViewRef]);
-  var indexRef = React__default["default"].useRef(selectedTabIndex);
   var tabContextProviderValue = React__default["default"].useMemo(function () {
     return {
       selectedTabKey: selectedTabKey
@@ -15665,7 +15596,6 @@ var ScrollableTab = function ScrollableTab(_ref) {
           onTabPress(selectedItem.key);
         });
       }
-      indexRef.current = index;
     },
     scrollEnabled: swipeEnabled
   }, tabs.map(function (tab, index) {
@@ -15673,23 +15603,18 @@ var ScrollableTab = function ScrollableTab(_ref) {
       component = tab.component,
       testID = tab.testID;
     return /*#__PURE__*/React__default["default"].createElement(ScreenContext.Provider, {
-      value: key
+      value: key,
+      key: key
     }, /*#__PURE__*/React__default["default"].createElement(SceneView, {
       testID: testID,
-      key: key,
       index: index,
-      selectedIndex: indexRef.current,
+      selectedIndex: selectedTabIndex,
       lazy: lazy,
-      lazyPreloadDistance: lazyPreloadDistance,
-      focused: selectedTabKey === key
+      lazyPreloadDistance: lazyPreloadDistance
     }, component));
   }))));
 };
 
-var ScrollableTabsV2 = Object.assign(ScrollableTab, {
-  useIsFocused: useIsFocused
-});
-
 var getTabItem = function getTabItem(_ref) {
   var item = _ref.item,
     color = _ref.color,
@@ -15738,7 +15663,14 @@ var Tabs = function Tabs(_ref2) {
       (_pagerViewRef$current = pagerViewRef.current) === null || _pagerViewRef$current === void 0 ? void 0 : _pagerViewRef$current.setPage(selectedTabIndex);
     }
   }, [selectedTabIndex]);
-  return /*#__PURE__*/React__default["default"].createElement(TabContainer$1, {
+  var tabContextProviderValue = React__default["default"].useMemo(function () {
+    return {
+      selectedTabKey: selectedTabKey
+    };
+  }, [selectedTabKey]);
+  return /*#__PURE__*/React__default["default"].createElement(TabContext.Provider, {
+    value: tabContextProviderValue
+  }, /*#__PURE__*/React__default["default"].createElement(TabContainer$1, {
     style: containerStyle,
     testID: componentTestID
   }, /*#__PURE__*/React__default["default"].createElement(HeaderTabWrapper$1, {
@@ -15803,21 +15735,22 @@ var Tabs = function Tabs(_ref2) {
     var key = tab.key,
       component = tab.component,
       testID = tab.testID;
-    var active = selectedTabKey === key;
-    var isLazyScreen = lazy && Math.abs(selectedTabIndex - index) > lazyPreloadDistance;
-    return /*#__PURE__*/React__default["default"].createElement(TabScreen$1, {
+    return /*#__PURE__*/React__default["default"].createElement(ScreenContext.Provider, {
+      value: key,
+      key: key
+    }, /*#__PURE__*/React__default["default"].createElement(SceneView, {
+      testID: testID,
       key: key,
-      testID: testID ? "tab-screen-".concat(testID) : undefined,
-      pointerEvents: active ? 'auto' : 'none',
-      accessibilityElementsHidden: !active,
-      importantForAccessibility: active ? 'auto' : 'no-hide-descendants',
-      collapsable: false
-    }, isLazyScreen ? null : component);
-  })));
+      index: index,
+      selectedIndex: selectedTabIndex,
+      lazy: lazy,
+      lazyPreloadDistance: lazyPreloadDistance
+    }, component));
+  }))));
 };
 var index$2 = Object.assign(Tabs, {
-  Scroll: ScrollableTab$1,
-  ScrollV2: ScrollableTabsV2
+  Scroll: ScrollableTab,
+  useIsFocused: useIsFocused
 });
 
 var getFilledStyles = function getFilledStyles(themeIntent, theme) {
@@ -32706,11 +32639,10 @@ var RichTextEditor = function RichTextEditor(_ref) {
     return "\n      <!DOCTYPE html>\n      <html>\n        <head>\n          <meta charset=\"utf-8\">\n          <meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0\">\n          <style>\n            body {\n              margin: 0;\n            }\n          </style>\n        </head>\n        <body>\n          <div id=\"root\"></div>\n          <script>\n            window.__editorConfigs = {\n              placeholder: \"".concat(placeholder, "\",\n              initialValue: ").concat(initialValueString, ",\n              isAndroid: ").concat(isAndroid ? 'true' : 'false', ",\n              autoFocus: ").concat(autoFocus, ",\n              style: {\n                padding: '0 !important',\n                fontSize: ").concat(theme.__hd__.richTextEditor.fontSizes.editor, ",\n                color: '").concat(theme.__hd__.richTextEditor.colors.text, "'\n              }\n            };\n            ").concat(heroEditorApp, "\n          </script>\n        </body>\n      </html>\n      ");
   }, []);
   var requestBlur = React.useCallback(function () {
-    if (webview.current) {
+    if (webview.current && isFocused) {
       requestBlurEditor(webview.current);
-      reactNative.Keyboard.dismiss();
     }
-  }, []);
+  }, [isFocused]);
   React.useImperativeHandle(forwardedRef, function () {
     return {
       requestBlur: requestBlur

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.24.0-alpha.0",
+  "version": "8.24.0",
   "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.23.0",
+    "@hero-design/colors": "8.24.0",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21"
@@ -45,7 +45,7 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.23.0",
+    "@hero-design/eslint-plugin": "8.24.0",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -61,9 +61,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.23.0",
+    "eslint-config-hd": "8.24.0",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.23.0",
+    "prettier-config-hd": "8.24.0",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.1.0",

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -10,7 +10,7 @@ import React, {
   useState,
 } from 'react';
 
-import { Keyboard, TouchableWithoutFeedback } from 'react-native';
+import { TouchableWithoutFeedback } from 'react-native';
 import { WebView } from 'react-native-webview';
 import type { ComponentType, ReactElement, Ref } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
@@ -207,11 +207,10 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
   }, []);
 
   const requestBlur = useCallback(() => {
-    if (webview.current) {
+    if (webview.current && isFocused) {
       requestBlurEditor(webview.current);
-      Keyboard.dismiss();
     }
-  }, []);
+  }, [isFocused]);
 
   useImperativeHandle(forwardedRef, () => ({ requestBlur }), [requestBlur]);
 

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

@@ -61,6 +61,7 @@ describe('Success', () => {
   });
   it('handles CTA press correctly', () => {
     const onCtaPress = jest.fn();
+    const onSecondCtaPress = jest.fn();
     const { getByText } = renderWithTheme(
       <Success
         title={title}
@@ -68,11 +69,16 @@ describe('Success', () => {
         image="path_to_image"
         ctaText="CTA Text"
         onCtaPress={onCtaPress}
+        secondaryCtaText="Second CTA Text"
+        onSecondaryCtaPress={onSecondCtaPress}
       />
     );
 
     const CTA = getByText('CTA Text');
     fireEvent.press(CTA);
+    const secondCTA = getByText('Second CTA Text');
+    fireEvent.press(secondCTA);
     expect(onCtaPress).toBeCalledTimes(1);
+    expect(onSecondCtaPress).toBeCalledTimes(1);
   });
 });

package/src/components/Success/index.tsx

@@ -47,6 +47,14 @@ export interface SuccessProps extends ViewProps {
    * Callback when the action button is pressed.
    */
   onCtaPress?: () => void;
+  /**
+   * Secondary button text.
+   */
+  secondaryCtaText?: string;
+  /**
+   * Callback when the secondary button is pressed.
+   */
+  onSecondaryCtaPress?: () => void;
   /**
    * Testing id of the component.
    */
@@ -78,8 +86,12 @@ const SuccessPage = ({
   testID,
   ctaText,
   onCtaPress = noop,
+  secondaryCtaText,
+  onSecondaryCtaPress,
   ...nativeProps
 }: SuccessProps): ReactElement => {
+  const showSecondaryButton = secondaryCtaText && onSecondaryCtaPress;
+
   return (
     <StyledSuccessContainer
       testID={testID}
@@ -102,6 +114,13 @@ const SuccessPage = ({
       {!!ctaText && (
         <StyledSuccessButtonContainer>
           <StyledSuccessButtonPrimary text={ctaText} onPress={onCtaPress} />
+          {!!showSecondaryButton && (
+            <StyledSuccessButtonPrimary
+              variant="text"
+              text={secondaryCtaText}
+              onPress={onSecondaryCtaPress}
+            />
+          )}
         </StyledSuccessButtonContainer>
       )}
     </StyledSuccessContainer>

package/src/components/Tabs/{ScrollableTabsV2/SceneView.tsx → SceneView.tsx}

@@ -1,8 +1,8 @@
 import React from 'react';
 import { StyleSheet } from 'react-native';
-import { TabScreen } from '../StyledScrollableTabs';
+import { TabScreen } from './StyledScrollableTabs';
 
-export const SceneView = ({
+const SceneView = ({
   lazy = false,
   lazyPreloadDistance = 1,
   children,

package/src/components/Tabs/ScrollableTabs.tsx

@@ -1,13 +1,11 @@
 import React from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import PagerView from 'react-native-pager-view';
-import {
-  TabContainer,
-  TabScreen,
-  ContentWrapper,
-} from './StyledScrollableTabs';
+import { TabContainer, ContentWrapper } from './StyledScrollableTabs';
 import type { TabsProps } from '.';
+import SceneView from './SceneView';
 import ScrollableTabHeader from './ScrollableTabsHeader';
+import { ScreenContext, TabContext } from './useIsFocused';
 
 const ScrollableTab = ({
   onTabPress,
@@ -25,6 +23,7 @@ const ScrollableTab = ({
   const selectedTabIndex = tabs.findIndex(
     (item) => item.key === selectedTabKey
   );
+
   React.useEffect(() => {
     let timeoutHandle: number | null = null;
     if (selectedTabIndex !== -1) {
@@ -43,51 +42,58 @@ const ScrollableTab = ({
     };
   }, [selectedTabIndex, pagerViewRef]);
 
+  const tabContextProviderValue = React.useMemo(
+    () => ({
+      selectedTabKey,
+    }),
+    [selectedTabKey]
+  );
+
   return (
-    <TabContainer style={containerStyle} testID={componentTestID}>
-      <ScrollableTabHeader
-        tabs={tabs}
-        selectedIndex={selectedTabIndex}
-        onTabPress={onTabPress}
-        barStyle={barStyle}
-        insets={insets}
-        testID={componentTestID ? `${componentTestID}-tab-bar` : undefined}
-      />
-      <ContentWrapper
-        initialPage={selectedTabIndex}
-        ref={pagerViewRef}
-        onPageSelected={(e) => {
-          const index = e.nativeEvent.position;
-          const selectedItem = tabs[index];
-          if (selectedItem) {
-            onTabPress(selectedItem.key);
-          }
-        }}
-        scrollEnabled={swipeEnabled}
-      >
-        {tabs.map((tab, index) => {
-          const { key, component, testID } = tab;
-          const active = selectedTabKey === key;
-          const isLazyScreen =
-            lazy && Math.abs(selectedTabIndex - index) > lazyPreloadDistance;
+    <TabContext.Provider value={tabContextProviderValue}>
+      <TabContainer style={containerStyle} testID={componentTestID}>
+        <ScrollableTabHeader
+          tabs={tabs}
+          selectedIndex={selectedTabIndex}
+          onTabPress={onTabPress}
+          barStyle={barStyle}
+          insets={insets}
+          testID={componentTestID ? `${componentTestID}-tab-bar` : undefined}
+        />
+        <ContentWrapper
+          initialPage={selectedTabIndex}
+          ref={pagerViewRef}
+          onPageSelected={(e) => {
+            const index = e.nativeEvent.position;
+            const selectedItem = tabs[index];
+            if (selectedItem) {
+              setTimeout(() => {
+                onTabPress(selectedItem.key);
+              });
+            }
+          }}
+          scrollEnabled={swipeEnabled}
+        >
+          {tabs.map((tab, index) => {
+            const { key, component, testID } = tab;
 
-          return (
-            <TabScreen
-              key={key}
-              testID={testID ? `tab-screen-${testID}` : undefined}
-              pointerEvents={active ? 'auto' : 'none'}
-              accessibilityElementsHidden={!active}
-              importantForAccessibility={
-                active ? 'auto' : 'no-hide-descendants'
-              }
-              collapsable={false}
-            >
-              {isLazyScreen ? null : component}
-            </TabScreen>
-          );
-        })}
-      </ContentWrapper>
-    </TabContainer>
+            return (
+              <ScreenContext.Provider value={key} key={key}>
+                <SceneView
+                  testID={testID}
+                  index={index}
+                  selectedIndex={selectedTabIndex}
+                  lazy={lazy}
+                  lazyPreloadDistance={lazyPreloadDistance}
+                >
+                  {component}
+                </SceneView>
+              </ScreenContext.Provider>
+            );
+          })}
+        </ContentWrapper>
+      </TabContainer>
+    </TabContext.Provider>
   );
 };
 

package/src/components/Tabs/{ScrollableTabsV2/__tests__ → __tests__}/SceneView.spec.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { ThemeProvider } from '@emotion/react';
-import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import ScenceView from '../SceneView';
-import Typography from '../../../Typography';
-import { theme } from '../../../../index';
+import Typography from '../../Typography';
+import { theme } from '../../../index';
 
 describe('ScenceView', () => {
   describe('lazy', () => {