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

package/src/components/Tabs/ScrollableTabs.tsx

@@ -1,59 +1,13 @@
 import React from 'react';
-import { TouchableWithoutFeedback, FlatList, Animated } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useTheme } from '@emotion/react';
 import PagerView from 'react-native-pager-view';
 import {
-  HeaderTabItem,
-  HeaderTabWrapper,
   TabContainer,
   TabScreen,
   ContentWrapper,
-  HeaderTabItemOutline,
-  HeaderTabItemWrapper,
-  HeaderTabItemOutlineWrapper,
 } from './StyledScrollableTabs';
-import { useAnimatedValueArray } from './utils';
-import { isHeroIcon } from '../Icon/utils';
-import Icon from '../Icon';
-import Typography from '../Typography';
-import type { ItemType, TabsProps, TabType } from '.';
-import TabWithBadge from './TabWithBadge';
-
-const getTabItem = ({
-  item,
-  color,
-  active,
-}: {
-  item: ItemType;
-  color: string;
-  active: boolean;
-}) => {
-  if (isHeroIcon(item)) {
-    return (
-      <Icon
-        icon={item}
-        testID={`hero-icon-${item}`}
-        size="small"
-        style={{ color }}
-      />
-    );
-  }
-
-  if (typeof item === 'string') {
-    return (
-      <Typography.Text
-        fontWeight={active ? 'semi-bold' : 'regular'}
-        numberOfLines={1}
-        style={{ color }}
-      >
-        {item}
-      </Typography.Text>
-    );
-  }
-
-  return item({ color });
-};
+import type { TabsProps } from '.';
+import ScrollableTabHeader from './ScrollableTabsHeader';
 
 const ScrollableTab = ({
   onTabPress,
@@ -66,24 +20,14 @@ const ScrollableTab = ({
   swipeEnabled = true,
   testID: componentTestID,
 }: TabsProps) => {
-  const flatListRef = React.useRef<FlatList>(null);
   const pagerViewRef = React.useRef<PagerView>(null);
   const insets = useSafeAreaInsets();
-  const theme = useTheme();
   const selectedTabIndex = tabs.findIndex(
     (item) => item.key === selectedTabKey
   );
-  const tabsAnims = useAnimatedValueArray(
-    tabs.map((_, i) => (i === selectedTabIndex ? 1 : 0))
-  );
-
   React.useEffect(() => {
     let timeoutHandle: number | null = null;
     if (selectedTabIndex !== -1) {
-      flatListRef.current?.scrollToIndex({
-        index: selectedTabIndex,
-        viewPosition: 0.5,
-      });
       // 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(() => {
@@ -92,19 +36,7 @@ const ScrollableTab = ({
       }, 200);
     }
 
-    const animation = Animated.parallel([
-      ...tabs.map((_, i) =>
-        Animated.timing(tabsAnims[i], {
-          toValue: i === selectedTabIndex ? 1 : 0,
-          duration: 150,
-          useNativeDriver: true,
-        })
-      ),
-    ]);
-    animation.start();
-
     return () => {
-      animation.stop();
       if (timeoutHandle) {
         clearTimeout(timeoutHandle);
       }
@@ -113,85 +45,14 @@ const ScrollableTab = ({
 
   return (
     <TabContainer style={containerStyle} testID={componentTestID}>
-      <HeaderTabWrapper themeInsets={insets} style={barStyle}>
-        <FlatList<TabType>
-          testID={componentTestID ? `${componentTestID}-tab-bar` : undefined}
-          ref={flatListRef}
-          horizontal
-          data={tabs}
-          keyExtractor={(tab) => String(tab.key)}
-          showsHorizontalScrollIndicator={false}
-          onScrollToIndexFailed={({ index }) => {
-            setTimeout(
-              () =>
-                flatListRef.current?.scrollToIndex({
-                  index,
-                  viewPosition: 0.5,
-                }),
-              100
-            );
-          }}
-          contentContainerStyle={{
-            paddingHorizontal:
-              theme.__hd__.tabs.space.flatListHorizontalPadding,
-          }}
-          renderItem={({ item: tab, index }) => {
-            const {
-              key,
-              testID,
-              activeItem,
-              inactiveItem: originalInactiveItem,
-              badge,
-            } = tab;
-            const active = selectedTabKey === key;
-            const activeAnimated = tabsAnims[index];
-            const outlineScale = active
-              ? activeAnimated.interpolate({
-                  inputRange: [0, 1],
-                  outputRange: [0.5, 1],
-                })
-              : 0;
-
-            const inactiveItem = originalInactiveItem ?? activeItem;
-            const tabItem = getTabItem({
-              item: active ? activeItem : inactiveItem,
-              color: active
-                ? theme.__hd__.tabs.colors.active
-                : theme.__hd__.tabs.colors.inactive,
-              active,
-            });
-
-            return (
-              <TouchableWithoutFeedback
-                key={key}
-                onPress={() => {
-                  onTabPress(key);
-                }}
-                testID={testID}
-              >
-                <HeaderTabItem isFirstItem={index === 0}>
-                  <HeaderTabItemOutlineWrapper>
-                    <HeaderTabItemOutline
-                      themeActive={active}
-                      style={{
-                        flex: 1,
-                        transform: [
-                          {
-                            scaleX: outlineScale,
-                          },
-                        ],
-                      }}
-                    />
-                  </HeaderTabItemOutlineWrapper>
-                  <HeaderTabItemWrapper>
-                    <TabWithBadge config={badge} tabItem={tabItem} />
-                  </HeaderTabItemWrapper>
-                </HeaderTabItem>
-              </TouchableWithoutFeedback>
-            );
-          }}
-        />
-      </HeaderTabWrapper>
+      <ScrollableTabHeader
+        tabs={tabs}
+        selectedIndex={selectedTabIndex}
+        onTabPress={onTabPress}
+        barStyle={barStyle}
+        insets={insets}
+        testID={componentTestID ? `${componentTestID}-tab-bar` : undefined}
+      />
       <ContentWrapper
         initialPage={selectedTabIndex}
         ref={pagerViewRef}

package/src/components/Tabs/ScrollableTabsHeader.tsx

@@ -0,0 +1,214 @@
+import React from 'react';
+import {
+  TouchableWithoutFeedback,
+  FlatList,
+  Animated,
+  StyleProp,
+  ViewStyle,
+  ViewProps,
+} from 'react-native';
+import { useTheme } from '@emotion/react';
+import {
+  HeaderTabItem,
+  HeaderTabWrapper,
+  HeaderTabItemOutline,
+  HeaderTabItemWrapper,
+  HeaderTabItemOutlineWrapper,
+} from './StyledScrollableTabs';
+import { useAnimatedValueArray } from './utils';
+import { isHeroIcon } from '../Icon/utils';
+import Icon from '../Icon';
+import Typography from '../Typography';
+import type { ItemType, TabType } from '.';
+import TabWithBadge from './TabWithBadge';
+
+const getTabItem = ({
+  item,
+  color,
+  active,
+}: {
+  item: ItemType;
+  color: string;
+  active: boolean;
+}) => {
+  if (isHeroIcon(item)) {
+    return (
+      <Icon
+        icon={item}
+        testID={`hero-icon-${item}`}
+        size="small"
+        style={{ color }}
+      />
+    );
+  }
+
+  if (typeof item === 'string') {
+    return (
+      <Typography.Text
+        fontWeight={active ? 'semi-bold' : 'regular'}
+        numberOfLines={1}
+        style={{ color }}
+      >
+        {item}
+      </Typography.Text>
+    );
+  }
+
+  return item({ color });
+};
+
+export interface ScrollableTabHeaderProps extends ViewProps {
+  /**
+   * Callback which is called on tab press, receiving key of upcoming active Tab.
+   */
+  onTabPress: (key: string) => void;
+  /**
+   * Current selected tab key.
+   */
+  selectedIndex?: number;
+  /**
+   * List of Tabs to be rendered. Each Tab must have an unique key.
+   */
+  tabs: TabType[];
+  /**
+   * Style for the tab navigation bar.
+   */
+  barStyle?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+  /**
+   * component insets
+   */
+  insets?: {
+    top: number;
+    bottom: number;
+    right: number;
+    left: number;
+  };
+}
+const ScrollableTabHeader = ({
+  onTabPress,
+  selectedIndex,
+  tabs,
+  barStyle,
+  testID,
+  insets = { top: 0, bottom: 0, right: 0, left: 0 },
+}: ScrollableTabHeaderProps) => {
+  const flatListRef = React.useRef<FlatList>(null);
+  const theme = useTheme();
+  const tabsAnims = useAnimatedValueArray(
+    tabs.map((_, i) => (i === selectedIndex ? 1 : 0))
+  );
+
+  React.useEffect(() => {
+    const timeoutHandle: number | null = null;
+    if (selectedIndex !== undefined && selectedIndex !== -1) {
+      flatListRef.current?.scrollToIndex({
+        index: selectedIndex,
+        viewPosition: 0.5,
+      });
+    }
+
+    const animation = Animated.parallel([
+      ...tabs.map((_, i) =>
+        Animated.timing(tabsAnims[i], {
+          toValue: i === selectedIndex ? 1 : 0,
+          duration: 150,
+          useNativeDriver: true,
+        })
+      ),
+    ]);
+    animation.start();
+
+    return () => {
+      animation.stop();
+      if (timeoutHandle) {
+        clearTimeout(timeoutHandle);
+      }
+    };
+  }, [selectedIndex]);
+
+  return (
+    <HeaderTabWrapper themeInsets={insets} style={barStyle}>
+      <FlatList<TabType>
+        testID={testID}
+        ref={flatListRef}
+        horizontal
+        data={tabs}
+        keyExtractor={(tab) => String(tab.key)}
+        showsHorizontalScrollIndicator={false}
+        onScrollToIndexFailed={({ index }) => {
+          setTimeout(
+            () =>
+              flatListRef.current?.scrollToIndex({
+                index,
+                viewPosition: 0.5,
+              }),
+            100
+          );
+        }}
+        contentContainerStyle={{
+          paddingHorizontal: theme.__hd__.tabs.space.flatListHorizontalPadding,
+        }}
+        renderItem={({ item: tab, index }) => {
+          const {
+            key,
+            testID: tabItemTestID,
+            activeItem,
+            inactiveItem: originalInactiveItem,
+            badge,
+          } = tab;
+          const active = selectedIndex === index;
+          const activeAnimated = tabsAnims[index];
+          const outlineScale = active
+            ? activeAnimated.interpolate({
+                inputRange: [0, 1],
+                outputRange: [0.5, 1],
+              })
+            : 0;
+
+          const inactiveItem = originalInactiveItem ?? activeItem;
+          const tabItem = getTabItem({
+            item: active ? activeItem : inactiveItem,
+            color: active
+              ? theme.__hd__.tabs.colors.active
+              : theme.__hd__.tabs.colors.inactive,
+            active,
+          });
+
+          return (
+            <TouchableWithoutFeedback
+              key={key}
+              onPress={() => {
+                onTabPress(key);
+              }}
+              testID={tabItemTestID}
+            >
+              <HeaderTabItem isFirstItem={index === 0}>
+                <HeaderTabItemOutlineWrapper>
+                  <HeaderTabItemOutline
+                    themeActive={active}
+                    style={{
+                      flex: 1,
+                      transform: [
+                        {
+                          scaleX: outlineScale,
+                        },
+                      ],
+                    }}
+                  />
+                </HeaderTabItemOutlineWrapper>
+                <HeaderTabItemWrapper>
+                  <TabWithBadge config={badge} tabItem={tabItem} />
+                </HeaderTabItemWrapper>
+              </HeaderTabItem>
+            </TouchableWithoutFeedback>
+          );
+        }}
+      />
+    </HeaderTabWrapper>
+  );
+};
+export default ScrollableTabHeader;

package/src/components/Tabs/ScrollableTabsV2/SceneView.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { TabScreen } from '../StyledScrollableTabs';
+
+export const SceneView = ({
+  lazy = false,
+  lazyPreloadDistance = 1,
+  children,
+  index,
+  selectedIndex,
+  testID,
+}: {
+  children: React.ReactNode;
+  index: number;
+  selectedIndex: number;
+  lazy?: boolean;
+  lazyPreloadDistance?: number;
+  testID?: string;
+}) => {
+  const [isLoading, setIsLoading] = React.useState(
+    Math.abs(selectedIndex - index) > lazyPreloadDistance
+  );
+  const focused = index === selectedIndex;
+
+  if (isLoading && Math.abs(selectedIndex - index) <= lazyPreloadDistance) {
+    // Always render the route when it becomes focused
+    setIsLoading(false);
+  }
+
+  React.useEffect(() => {
+    let unsubscribe: (() => void) | undefined;
+    let timer: number | undefined;
+
+    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(() => setIsLoading(false), 0);
+    }
+
+    return () => {
+      unsubscribe?.();
+      clearTimeout(timer);
+    };
+  }, [index, isLoading, lazy, focused]);
+
+  return (
+    <TabScreen
+      accessibilityElementsHidden={!focused}
+      importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}
+      style={[
+        { flex: 1, overflow: 'hidden' },
+        focused ? StyleSheet.absoluteFill : null,
+      ]}
+      testID={testID}
+    >
+      {focused || !isLoading ? children : null}
+    </TabScreen>
+  );
+};
+
+export default SceneView;

package/src/components/Tabs/ScrollableTabsV2/ScrollableTabsV2.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import PagerView from 'react-native-pager-view';
+import { TabContainer, ContentWrapper } from '../StyledScrollableTabs';
+import type { TabsProps } from '..';
+import { SceneView } from './SceneView';
+import ScrollableTabHeader from '../ScrollableTabsHeader';
+
+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;
+};
+
+const ScrollableTab = ({
+  onTabPress,
+  selectedTabKey,
+  tabs,
+  containerStyle,
+  barStyle,
+  lazy = false,
+  lazyPreloadDistance = 1,
+  swipeEnabled = true,
+  testID: componentTestID,
+}: TabsProps) => {
+  const pagerViewRef = React.useRef<PagerView>(null);
+  const insets = useSafeAreaInsets();
+  const selectedTabIndex = tabs.findIndex(
+    (item) => item.key === selectedTabKey
+  );
+
+  React.useEffect(() => {
+    let timeoutHandle: number | null = 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(() => {
+        // use no animation to prevent unexpected behavior if users select tab too quickly
+        pagerViewRef.current?.setPageWithoutAnimation(selectedTabIndex);
+      }, 200);
+    }
+
+    return () => {
+      if (timeoutHandle) {
+        clearTimeout(timeoutHandle);
+      }
+    };
+  }, [selectedTabIndex, pagerViewRef]);
+
+  const indexRef = React.useRef(selectedTabIndex);
+  const tabContextProviderValue = React.useMemo(
+    () => ({
+      selectedTabKey,
+    }),
+    [selectedTabKey]
+  );
+
+  return (
+    <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);
+              });
+            }
+            indexRef.current = index;
+          }}
+          scrollEnabled={swipeEnabled}
+        >
+          {tabs.map((tab, index) => {
+            const { key, component, testID } = tab;
+
+            return (
+              <ScreenContext.Provider value={key}>
+                <SceneView
+                  testID={testID}
+                  key={key}
+                  index={index}
+                  selectedIndex={indexRef.current}
+                  lazy={lazy}
+                  lazyPreloadDistance={lazyPreloadDistance}
+                >
+                  {component}
+                </SceneView>
+              </ScreenContext.Provider>
+            );
+          })}
+        </ContentWrapper>
+      </TabContainer>
+    </TabContext.Provider>
+  );
+};
+
+export default ScrollableTab;

package/src/components/Tabs/ScrollableTabsV2/__tests__/SceneView.spec.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { ThemeProvider } from '@emotion/react';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import ScenceView from '../SceneView';
+import Typography from '../../../Typography';
+import { theme } from '../../../../index';
+
+describe('ScenceView', () => {
+  describe('lazy', () => {
+    it('renders child correctly when the scence is focused and should not unmount if selected index changed to index which is out of lazyPreloadDistance', () => {
+      const { getByText, toJSON, queryByText, rerender } = renderWithTheme(
+        <ScenceView
+          testID="scene-view"
+          index={0}
+          selectedIndex={0}
+          lazy
+          lazyPreloadDistance={1}
+        >
+          <Typography.Text>Scene 1</Typography.Text>
+        </ScenceView>
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+      expect(getByText('Scene 1')).toBeDefined();
+
+      rerender(
+        <ThemeProvider theme={theme}>
+          <ScenceView
+            testID="scene-view"
+            index={0}
+            selectedIndex={2}
+            lazy
+            lazyPreloadDistance={1}
+          >
+            <Typography.Text>Scene 1</Typography.Text>
+          </ScenceView>
+        </ThemeProvider>
+      );
+      expect(toJSON()).toMatchSnapshot();
+      expect(queryByText('Scene 1')).toBeDefined();
+    });
+
+    it('not renders child correctly when the scence is lazy and renders when selectedIndex change to 1', () => {
+      const { rerender, queryByText, toJSON } = renderWithTheme(
+        <ScenceView
+          testID="scene-view"
+          index={2}
+          selectedIndex={0}
+          lazy
+          lazyPreloadDistance={1}
+        >
+          <Typography.Text>Scene 1</Typography.Text>
+        </ScenceView>
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+      expect(queryByText('Scene 1')).toBeNull();
+
+      rerender(
+        <ThemeProvider theme={theme}>
+          <ScenceView
+            testID="scene-view"
+            index={2}
+            selectedIndex={1}
+            lazy
+            lazyPreloadDistance={1}
+          >
+            <Typography.Text>Scene 1</Typography.Text>
+          </ScenceView>
+        </ThemeProvider>
+      );
+      expect(toJSON()).toMatchSnapshot();
+      expect(queryByText('Scene 1')).toBeDefined();
+    });
+  });
+});