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

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

@@ -1,12 +1,22 @@
 import React from 'react';
 import { Text } from 'react-native';
-import { fireEvent } from '@testing-library/react-native';
+import { fireEvent, waitFor } from '@testing-library/react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import type { ComponentProps } from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Tabs from '..';
 import Button from '../../Button';
 import type { TabType } from '..';
+import { useIsFocused } from '../useIsFocused';
+
+const CustomScreen = ({ title }: { title: string }) => {
+  const isFocused = useIsFocused();
+  return (
+    <Text>
+      {title} {isFocused ? 'focused' : 'unfocused'}
+    </Text>
+  );
+};
 
 const TestTabsComponent = (
   props: Omit<
@@ -19,17 +29,17 @@ const TestTabsComponent = (
     {
       key: 'work',
       activeItem: 'Work',
-      component: <Text>Work Screen</Text>,
+      component: <CustomScreen title="Work Screen" />,
     },
     {
       key: 'personal',
       activeItem: 'Personal',
-      component: <Text>Personal Screen</Text>,
+      component: <CustomScreen title="Personal Screen" />,
     },
     {
       key: 'home',
       activeItem: 'Home',
-      component: <Text>Home Screen</Text>,
+      component: <CustomScreen title="Home Screen" />,
       badge: {
         type: 'status',
       },
@@ -37,7 +47,7 @@ const TestTabsComponent = (
     {
       key: 'money',
       activeItem: 'Money',
-      component: <Text>Money Screen</Text>,
+      component: <CustomScreen title="Money Screen" />,
       badge: {
         type: 'counter',
         value: 50,
@@ -75,15 +85,15 @@ describe('Tabs', () => {
     expect(getByText('Work')).toBeDefined();
     expect(getByText('Personal')).toBeDefined();
     expect(getByText('Home')).toBeDefined();
-    expect(getByText('Work Screen')).toBeDefined();
+    expect(getByText('Work Screen focused')).toBeDefined();
     fireEvent.press(getByText('Personal'));
-    expect(getByText('Personal Screen')).toBeDefined();
+    expect(getByText('Personal Screen focused')).toBeDefined();
     fireEvent.press(getByText('Home'));
-    expect(getByText('Home Screen')).toBeDefined();
+    expect(getByText('Home Screen focused')).toBeDefined();
     fireEvent.press(getByText('Move to Work'));
-    expect(getByText('Work Screen')).toBeDefined();
+    expect(getByText('Work Screen focused')).toBeDefined();
     fireEvent.press(getByText('Money'));
-    expect(getByText('Money Screen')).toBeDefined();
+    expect(getByText('Money Screen focused')).toBeDefined();
     expect(getByText('50')).toBeDefined();
   });
 
@@ -92,13 +102,47 @@ describe('Tabs', () => {
       <TestTabsComponent lazy lazyPreloadDistance={1} swipeEnabled={false} />
     );
 
-    expect(getByText('Work Screen')).toBeDefined();
-    expect(getByText('Personal Screen')).toBeDefined();
+    expect(getByText('Work Screen focused')).toBeDefined();
+    expect(getByText('Personal Screen unfocused')).toBeDefined();
     // Preload distance is 1, so Home Screen is not rendered.
     expect(queryByText('Home Screen')).toBeNull();
 
     fireEvent.press(getByText('Home'));
-    expect(getByText('Home Screen')).toBeDefined();
-    expect(queryByText('Work Screen')).toBeNull();
+    expect(getByText('Home Screen focused')).toBeDefined();
+  });
+});
+
+describe('useIsFocused', () => {
+  it('renders correctly', async () => {
+    const { getByText, toJSON } = renderWithTheme(<TestTabsComponent />);
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('Work Screen focused')).toBeDefined();
+    expect(getByText('Personal Screen unfocused')).toBeDefined();
+    await waitFor(() =>
+      expect(getByText('Home Screen unfocused')).toBeDefined()
+    );
+    expect(getByText('Home Screen unfocused')).toBeDefined();
+    expect(getByText('Money Screen unfocused')).toBeDefined();
+
+    fireEvent.press(getByText('Personal'));
+    expect(toJSON()).toMatchSnapshot('xxxxxx');
+    expect(getByText('Personal Screen focused')).toBeDefined();
+    expect(getByText('Work Screen unfocused')).toBeDefined();
+    expect(getByText('Home Screen unfocused')).toBeDefined();
+    expect(getByText('Money Screen unfocused')).toBeDefined();
+
+    fireEvent.press(getByText('Home'));
+    expect(getByText('Personal Screen unfocused')).toBeDefined();
+    expect(getByText('Work Screen unfocused')).toBeDefined();
+    expect(getByText('Home Screen focused')).toBeDefined();
+    expect(getByText('Money Screen unfocused')).toBeDefined();
+
+    fireEvent.press(getByText('Money'));
+    expect(getByText('Personal Screen unfocused')).toBeDefined();
+    expect(getByText('Work Screen unfocused')).toBeDefined();
+    expect(getByText('Home Screen unfocused')).toBeDefined();
+    expect(getByText('Money Screen focused')).toBeDefined();
+    expect(getByText('50')).toBeDefined();
   });
 });

package/src/components/Tabs/index.tsx

@@ -9,18 +9,18 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { IconName } from '../Icon';
 import Typography from '../Typography';
 import ActiveTabIndicator from './ActiveTabIndicator';
+import SceneView from './SceneView';
 import ScrollableTabs from './ScrollableTabs';
-import ScrollableTabsV2 from './ScrollableTabsV2';
 import {
   ContentWrapper,
   HeaderTab,
   HeaderTabItem,
   HeaderTabWrapper,
   TabContainer,
-  TabScreen,
 } from './StyledTabs';
 import type { BadgeConfigType } from './TabWithBadge';
 import TabWithBadge from './TabWithBadge';
+import { ScreenContext, TabContext, useIsFocused } from './useIsFocused';
 
 export type ItemType =
   | string
@@ -129,114 +129,120 @@ const Tabs = ({
     }
   }, [selectedTabIndex]);
 
+  const tabContextProviderValue = React.useMemo(
+    () => ({
+      selectedTabKey,
+    }),
+    [selectedTabKey]
+  );
+
   return (
-    <TabContainer style={containerStyle} testID={componentTestID}>
-      <HeaderTabWrapper
-        themeInsets={insets}
-        style={barStyle}
-        testID={componentTestID ? `${componentTestID}-tab-bar` : undefined}
-      >
-        <View>
-          <HeaderTab
-            onLayout={(e) => {
-              const { width } = e.nativeEvent.layout;
-              if (tabsWidth !== width) {
-                setTabsWidth(width);
-              }
-            }}
-          >
-            {tabs.map((tab) => {
-              const {
-                key,
-                testID,
-                activeItem,
-                inactiveItem: originalInactiveItem,
-                badge,
-              } = tab;
+    <TabContext.Provider value={tabContextProviderValue}>
+      <TabContainer style={containerStyle} testID={componentTestID}>
+        <HeaderTabWrapper
+          themeInsets={insets}
+          style={barStyle}
+          testID={componentTestID ? `${componentTestID}-tab-bar` : undefined}
+        >
+          <View>
+            <HeaderTab
+              onLayout={(e) => {
+                const { width } = e.nativeEvent.layout;
+                if (tabsWidth !== width) {
+                  setTabsWidth(width);
+                }
+              }}
+            >
+              {tabs.map((tab) => {
+                const {
+                  key,
+                  testID,
+                  activeItem,
+                  inactiveItem: originalInactiveItem,
+                  badge,
+                } = tab;
 
-              const active = selectedTabKey === key;
-              const inactiveItem = originalInactiveItem ?? activeItem;
-              const tabItem = getTabItem({
-                item: active ? activeItem : inactiveItem,
-                color: theme.__hd__.tabs.colors.text,
-                active,
-              });
+                const active = selectedTabKey === key;
+                const inactiveItem = originalInactiveItem ?? activeItem;
+                const tabItem = getTabItem({
+                  item: active ? activeItem : inactiveItem,
+                  color: theme.__hd__.tabs.colors.text,
+                  active,
+                });
 
-              return (
-                <TouchableWithoutFeedback
-                  key={key}
-                  onPress={() => {
-                    onTabPress(key);
-                  }}
-                  testID={testID}
-                >
-                  <HeaderTabItem>
-                    <TabWithBadge config={badge} tabItem={tabItem} />
-                  </HeaderTabItem>
-                </TouchableWithoutFeedback>
-              );
-            })}
-          </HeaderTab>
-          <ActiveTabIndicator
-            positionAnimatedValue={positionAnimatedValue}
-            scrollOffsetAnimatedValue={scrollOffsetAnimatedValue}
-            tabsLength={tabs.length}
-            tabsWidth={tabsWidth}
-          />
-        </View>
-      </HeaderTabWrapper>
-      <ContentWrapper
-        initialPage={selectedTabIndex}
-        ref={pagerViewRef}
-        onPageSelected={(e) => {
-          const index = e.nativeEvent.position;
-          const selectedItem = tabs[index];
-          if (selectedItem) {
-            onTabPress(selectedItem.key);
-          }
-        }}
-        onPageScroll={Animated.event<PagerViewOnPageScrollEventData>(
-          [
-            {
-              nativeEvent: {
-                offset: scrollOffsetAnimatedValue,
-                position: positionAnimatedValue,
+                return (
+                  <TouchableWithoutFeedback
+                    key={key}
+                    onPress={() => {
+                      onTabPress(key);
+                    }}
+                    testID={testID}
+                  >
+                    <HeaderTabItem>
+                      <TabWithBadge config={badge} tabItem={tabItem} />
+                    </HeaderTabItem>
+                  </TouchableWithoutFeedback>
+                );
+              })}
+            </HeaderTab>
+            <ActiveTabIndicator
+              positionAnimatedValue={positionAnimatedValue}
+              scrollOffsetAnimatedValue={scrollOffsetAnimatedValue}
+              tabsLength={tabs.length}
+              tabsWidth={tabsWidth}
+            />
+          </View>
+        </HeaderTabWrapper>
+        <ContentWrapper
+          initialPage={selectedTabIndex}
+          ref={pagerViewRef}
+          onPageSelected={(e) => {
+            const index = e.nativeEvent.position;
+            const selectedItem = tabs[index];
+            if (selectedItem) {
+              onTabPress(selectedItem.key);
+            }
+          }}
+          onPageScroll={Animated.event<PagerViewOnPageScrollEventData>(
+            [
+              {
+                nativeEvent: {
+                  offset: scrollOffsetAnimatedValue,
+                  position: positionAnimatedValue,
+                },
               },
-            },
-          ],
-          {
-            useNativeDriver: true,
-          }
-        )}
-        scrollEnabled={swipeEnabled}
-      >
-        {tabs.map((tab, index) => {
-          const { key, component, testID } = tab;
-          const active = selectedTabKey === key;
-          const isLazyScreen =
-            lazy && Math.abs(selectedTabIndex - index) > lazyPreloadDistance;
+            ],
+            {
+              useNativeDriver: true,
+            }
+          )}
+          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}
+                  key={key}
+                  index={index}
+                  selectedIndex={selectedTabIndex}
+                  lazy={lazy}
+                  lazyPreloadDistance={lazyPreloadDistance}
+                >
+                  {component}
+                </SceneView>
+              </ScreenContext.Provider>
+            );
+          })}
+        </ContentWrapper>
+      </TabContainer>
+    </TabContext.Provider>
   );
 };
 
 export default Object.assign(Tabs, {
   Scroll: ScrollableTabs,
-  ScrollV2: ScrollableTabsV2,
+  useIsFocused,
 });

package/src/components/Tabs/useIsFocused.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export const TabContext = React.createContext<{
+  selectedTabKey: string;
+} | null>(null);
+
+export const ScreenContext = React.createContext<string | null>(null);
+
+export const useIsFocused = () => {
+  const context = React.useContext(TabContext);
+  const key = React.useContext(ScreenContext);
+  if (!context || !key) {
+    return;
+  }
+
+  const isFocused = context.selectedTabKey === key;
+
+  return isFocused;
+};