@hero-design/rn 8.56.1 → 8.57.1

package/src/components/Tabs/{ScrollableTabsHeader.tsx → ScrollableTabsHeader/ScrollableTabsHeader.tsx}

@@ -1,26 +1,28 @@
+import { useTheme } from '@emotion/react';
 import React from 'react';
 import {
-  TouchableWithoutFeedback,
   FlatList,
-  Animated,
+  Platform,
   StyleProp,
-  ViewStyle,
+  TouchableWithoutFeedback,
   ViewProps,
+  ViewStyle,
 } from 'react-native';
-import { useTheme } from '@emotion/react';
+import type { ItemType, TabType } from '..';
+import Icon from '../../Icon';
+import { isHeroIcon } from '../../Icon/utils';
+import Typography from '../../Typography';
 import {
   HeaderTabItem,
-  HeaderTabWrapper,
+  HeaderTabItemIndicator,
   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';
+  HeaderTabItemWrapper,
+  HeaderTabWrapper,
+} from '../StyledScrollableTabs';
+import TabWithBadge from '../TabWithBadge';
+import useInitHighlightedAnimation from './hooks/useInitHighlightedAnimation';
+import useInitUnderlinedAnimation from './hooks/useInitUnderlinedAnimation';
 
 const getTabItem = ({
   item,
@@ -87,6 +89,10 @@ export interface ScrollableTabHeaderProps extends ViewProps {
     right: number;
     left: number;
   };
+  /**
+   * Variant of the tab header
+   */
+  variant?: 'underlined' | 'highlighted';
 }
 const ScrollableTabHeader = ({
   onTabPress,
@@ -95,12 +101,25 @@ const ScrollableTabHeader = ({
   barStyle,
   testID,
   insets = { top: 0, bottom: 0, right: 0, left: 0 },
+  variant = 'highlighted',
 }: ScrollableTabHeaderProps) => {
-  const flatListRef = React.useRef<FlatList>(null);
   const theme = useTheme();
-  const tabsAnims = useAnimatedValueArray(
-    tabs.map((_, i) => (i === selectedIndex ? 1 : 0))
-  );
+  const flatListRef = React.useRef<FlatList>(null);
+
+  // Init underlined animation data
+  const { underlinedTranslateX, underlinedOpacity } =
+    useInitUnderlinedAnimation({
+      tabsLength: tabs.length,
+      selectedIndex,
+      variant,
+    });
+
+  // Init highlighted animation data
+  const { tabsAnims } = useInitHighlightedAnimation({
+    selectedIndex,
+    tabsLength: tabs.length,
+    variant,
+  });
 
   React.useEffect(() => {
     const timeoutHandle: number | null = null;
@@ -111,19 +130,7 @@ const ScrollableTabHeader = ({
       });
     }
 
-    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);
       }
@@ -149,8 +156,20 @@ const ScrollableTabHeader = ({
             100
           );
         }}
+        style={
+          // Border styles specified in contentContainerStyle don't work
+          // so they need to be placed here instead on Android.
+          Platform.OS === 'android'
+            ? {
+                borderBottomColor: theme.__hd__.tabs.colors.headerBottom,
+                borderBottomWidth: theme.__hd__.tabs.sizes.indicator,
+              }
+            : undefined
+        }
         contentContainerStyle={{
           paddingHorizontal: theme.__hd__.tabs.space.flatListHorizontalPadding,
+          borderBottomColor: theme.__hd__.tabs.colors.headerBottom,
+          borderBottomWidth: theme.__hd__.tabs.sizes.indicator,
         }}
         renderItem={({ item: tab, index }) => {
           const {
@@ -187,22 +206,34 @@ const ScrollableTabHeader = ({
               testID={tabItemTestID}
             >
               <HeaderTabItem isFirstItem={index === 0}>
-                <HeaderTabItemOutlineWrapper>
-                  <HeaderTabItemOutline
-                    themeActive={active}
-                    style={{
-                      flex: 1,
-                      transform: [
-                        {
-                          scaleX: outlineScale,
-                        },
-                      ],
-                    }}
-                  />
-                </HeaderTabItemOutlineWrapper>
+                {variant === 'highlighted' && (
+                  <HeaderTabItemOutlineWrapper>
+                    <HeaderTabItemOutline
+                      themeActive={active}
+                      style={{
+                        flex: 1,
+                        transform: [
+                          {
+                            scaleX: outlineScale,
+                          },
+                        ],
+                      }}
+                    />
+                  </HeaderTabItemOutlineWrapper>
+                )}
+
                 <HeaderTabItemWrapper>
                   <TabWithBadge config={badge} tabItem={tabItem} />
                 </HeaderTabItemWrapper>
+
+                {variant === 'underlined' && (
+                  <HeaderTabItemIndicator
+                    style={{
+                      opacity: underlinedOpacity[index],
+                      transform: [{ translateX: underlinedTranslateX[index] }],
+                    }}
+                  />
+                )}
               </HeaderTabItem>
             </TouchableWithoutFeedback>
           );

package/src/components/Tabs/ScrollableTabsHeader/hooks/useInitHighlightedAnimation.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Animated, Platform } from 'react-native';
+import { useAnimatedValueArray } from '../../utils';
+
+const useInitHighlightedAnimation = ({
+  selectedIndex = 0,
+  tabsLength,
+  variant,
+}: {
+  selectedIndex?: number;
+  tabsLength: number;
+  variant: 'underlined' | 'highlighted';
+}) => {
+  const tabsAnims = useAnimatedValueArray(
+    Array.from({ length: tabsLength }).map((_, i) =>
+      i === selectedIndex ? 1 : 0
+    )
+  );
+
+  React.useEffect(() => {
+    if (variant !== 'highlighted') {
+      return;
+    }
+
+    const animation = Animated.parallel([
+      ...Array.from({ length: tabsLength }).map((_, i) =>
+        Animated.timing(tabsAnims[i], {
+          toValue: i === selectedIndex ? 1 : 0,
+          duration: 150,
+          useNativeDriver: Platform.OS !== 'web',
+        })
+      ),
+    ]);
+
+    animation.start();
+
+    return () => {
+      animation.stop();
+    };
+  }, [selectedIndex]);
+
+  return { tabsAnims };
+};
+
+export default useInitHighlightedAnimation;

package/src/components/Tabs/ScrollableTabsHeader/hooks/useInitUnderlinedAnimation.ts

@@ -0,0 +1,91 @@
+import React from 'react';
+import { Animated, Easing, Platform } from 'react-native';
+import { useAnimatedValueArray } from '../../utils';
+
+const TRANSLATE_DISTANCE = 30;
+
+const animateOpacity = (animatedValue: Animated.Value, toValue: number) => {
+  return Animated.timing(animatedValue, {
+    toValue,
+    duration: 150,
+    easing: Easing.ease,
+    useNativeDriver: Platform.OS !== 'web',
+  });
+};
+
+const animateTranslateX = (animatedValue: Animated.Value, toValue: number) => {
+  return Animated.spring(animatedValue, {
+    toValue,
+    useNativeDriver: Platform.OS !== 'web',
+  });
+};
+
+const useInitUnderlinedAnimation = ({
+  tabsLength,
+  selectedIndex = 0,
+  variant,
+}: {
+  tabsLength: number;
+  selectedIndex?: number;
+  variant: 'underlined' | 'highlighted';
+}) => {
+  const previousIndex = React.useRef<number>(0);
+  const translateXAnims = useAnimatedValueArray(
+    Array.from({ length: tabsLength }).map(() => 0)
+  );
+
+  const opacityAnims = useAnimatedValueArray(
+    Array.from({ length: tabsLength }).map((_, i) =>
+      selectedIndex !== undefined && selectedIndex === i ? 1 : 0
+    )
+  );
+
+  const underlinedTranslateX = translateXAnims.map((anim) =>
+    anim.interpolate({
+      inputRange: [-1, 0, 1],
+      outputRange: [-TRANSLATE_DISTANCE, 0, TRANSLATE_DISTANCE],
+    })
+  );
+
+  const underlinedOpacity = opacityAnims.map((anim) =>
+    anim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, 1],
+    })
+  );
+
+  React.useEffect(() => {
+    if (
+      variant === 'underlined' &&
+      selectedIndex !== undefined &&
+      previousIndex.current !== selectedIndex
+    ) {
+      // Prepare for translateX into the right position.
+      if (selectedIndex > previousIndex.current) {
+        translateXAnims[selectedIndex].setValue(-1);
+      } else {
+        translateXAnims[selectedIndex].setValue(1);
+      }
+
+      // Split animations into 2 sets of parallel animations to prevent race condition.
+      Animated.parallel([
+        animateOpacity(opacityAnims[selectedIndex], 1),
+        animateTranslateX(translateXAnims[selectedIndex], 0),
+      ]).start();
+
+      Animated.parallel([
+        animateOpacity(opacityAnims[previousIndex.current], 0),
+        animateTranslateX(
+          translateXAnims[previousIndex.current],
+          selectedIndex > previousIndex.current ? 1 : -1
+        ),
+      ]).start();
+
+      previousIndex.current = selectedIndex;
+    }
+  }, [selectedIndex, variant, opacityAnims, translateXAnims]);
+
+  return { underlinedTranslateX, underlinedOpacity };
+};
+
+export default useInitUnderlinedAnimation;

package/src/components/Tabs/StyledScrollableTabs.tsx

@@ -17,10 +17,8 @@ const ContentWrapper = styled(PagerView)({
 
 const HeaderTabWrapper = styled(View)<{
   themeInsets: { top: number; right: number; bottom: number; left: number };
-}>(({ theme, themeInsets }) => ({
+}>(({ themeInsets }) => ({
   paddingHorizontal: Math.max(themeInsets.left, themeInsets.right),
-  borderBottomColor: theme.__hd__.tabs.colors.headerBottom,
-  borderBottomWidth: theme.__hd__.tabs.borderWidths.headerBottom,
 }));
 
 const HeaderTabItem = styled(Animated.View)<{ isFirstItem?: boolean }>(
@@ -47,6 +45,18 @@ const HeaderTabItemOutline = styled(Animated.View)<{ themeActive: boolean }>(
 const HeaderTabItemWrapper = styled(View)(({ theme }) => ({
   paddingHorizontal: theme.__hd__.tabs.space.outlineHorizontalPadding,
   paddingVertical: theme.__hd__.tabs.space.outlineVerticalPadding,
+  position: 'relative',
+  justifyContent: 'center',
+  alignItems: 'center',
+}));
+
+const HeaderTabItemIndicator = styled(Animated.View)(({ theme }) => ({
+  width: '100%',
+  height: theme.__hd__.tabs.sizes.indicator,
+  position: 'absolute',
+  bottom: theme.__hd__.tabs.space.tabIndicatorBottom,
+  zIndex: 999,
+  backgroundColor: theme.__hd__.tabs.colors.indicator,
 }));
 
 export {
@@ -58,4 +68,5 @@ export {
   HeaderTabItemOutlineWrapper,
   HeaderTabItemOutline,
   HeaderTabItemWrapper,
+  HeaderTabItemIndicator,
 };

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

@@ -4,7 +4,7 @@ import { fireEvent } from '@testing-library/react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import type { ComponentProps } from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import ScrollableTabsHeader from '../ScrollableTabsHeader';
+import ScrollableTabsHeader from '../ScrollableTabsHeader/ScrollableTabsHeader';
 import type { TabType } from '..';
 
 const TestTabsComponent = (
@@ -59,10 +59,14 @@ const TestTabsComponent = (
 };
 
 describe('ScrollableTabsHeader', () => {
-  it('renders correctly', () => {
+  it.each`
+    variant
+    ${'underlined'}
+    ${'highlighted'}
+  `('$variant variant renders correctly', ({ variant }) => {
     const onTabPress = jest.fn();
     const { getByTestId, getByText, toJSON } = renderWithTheme(
-      <TestTabsComponent onTabPress={onTabPress} />
+      <TestTabsComponent variant={variant} onTabPress={onTabPress} />
     );
 
     expect(toJSON()).toMatchSnapshot();

package/src/components/Tabs/__tests__/__snapshots__/ScrollableTabs.spec.tsx.snap

@@ -128,8 +128,6 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
         style={
           [
             {
-              "borderBottomColor": "#e8e9ea",
-              "borderBottomWidth": 2,
               "paddingHorizontal": 0,
             },
             undefined,
@@ -147,6 +145,8 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
         <RCTScrollView
           contentContainerStyle={
             {
+              "borderBottomColor": "#e8e9ea",
+              "borderBottomWidth": 2,
               "paddingHorizontal": 8,
             }
           }
@@ -288,8 +288,11 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
                   style={
                     [
                       {
+                        "alignItems": "center",
+                        "justifyContent": "center",
                         "paddingHorizontal": 8,
                         "paddingVertical": 4,
+                        "position": "relative",
                       },
                       undefined,
                     ]
@@ -399,8 +402,11 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
                   style={
                     [
                       {
+                        "alignItems": "center",
+                        "justifyContent": "center",
                         "paddingHorizontal": 8,
                         "paddingVertical": 4,
+                        "position": "relative",
                       },
                       undefined,
                     ]
@@ -504,8 +510,11 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
                   style={
                     [
                       {
+                        "alignItems": "center",
+                        "justifyContent": "center",
                         "paddingHorizontal": 8,
                         "paddingVertical": 4,
+                        "position": "relative",
                       },
                       undefined,
                     ]
@@ -636,8 +645,11 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
                   style={
                     [
                       {
+                        "alignItems": "center",
+                        "justifyContent": "center",
                         "paddingHorizontal": 8,
                         "paddingVertical": 4,
+                        "position": "relative",
                       },
                       undefined,
                     ]
@@ -1032,8 +1044,6 @@ exports[`Tabs.Scroll renders correctly 1`] = `
         style={
           [
             {
-              "borderBottomColor": "#e8e9ea",
-              "borderBottomWidth": 2,
               "paddingHorizontal": 0,
             },
             undefined,
@@ -1051,6 +1061,8 @@ exports[`Tabs.Scroll renders correctly 1`] = `
         <RCTScrollView
           contentContainerStyle={
             {
+              "borderBottomColor": "#e8e9ea",
+              "borderBottomWidth": 2,
               "paddingHorizontal": 8,
             }
           }
@@ -1192,8 +1204,11 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                   style={
                     [
                       {
+                        "alignItems": "center",
+                        "justifyContent": "center",
                         "paddingHorizontal": 8,
                         "paddingVertical": 4,
+                        "position": "relative",
                       },
                       undefined,
                     ]
@@ -1303,8 +1318,11 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                   style={
                     [
                       {
+                        "alignItems": "center",
+                        "justifyContent": "center",
                         "paddingHorizontal": 8,
                         "paddingVertical": 4,
+                        "position": "relative",
                       },
                       undefined,
                     ]
@@ -1408,8 +1426,11 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                   style={
                     [
                       {
+                        "alignItems": "center",
+                        "justifyContent": "center",
                         "paddingHorizontal": 8,
                         "paddingVertical": 4,
+                        "position": "relative",
                       },
                       undefined,
                     ]
@@ -1540,8 +1561,11 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                   style={
                     [
                       {
+                        "alignItems": "center",
+                        "justifyContent": "center",
                         "paddingHorizontal": 8,
                         "paddingVertical": 4,
+                        "position": "relative",
                       },
                       undefined,
                     ]
@@ -1936,8 +1960,6 @@ exports[`useIsFocused renders correctly 1`] = `
         style={
           [
             {
-              "borderBottomColor": "#e8e9ea",
-              "borderBottomWidth": 2,
               "paddingHorizontal": 0,
             },
             undefined,
@@ -1955,6 +1977,8 @@ exports[`useIsFocused renders correctly 1`] = `
         <RCTScrollView
           contentContainerStyle={
             {
+              "borderBottomColor": "#e8e9ea",
+              "borderBottomWidth": 2,
               "paddingHorizontal": 8,
             }
           }
@@ -2096,8 +2120,11 @@ exports[`useIsFocused renders correctly 1`] = `
                   style={
                     [
                       {
+                        "alignItems": "center",
+                        "justifyContent": "center",
                         "paddingHorizontal": 8,
                         "paddingVertical": 4,
+                        "position": "relative",
                       },
                       undefined,
                     ]
@@ -2207,8 +2234,11 @@ exports[`useIsFocused renders correctly 1`] = `
                   style={
                     [
                       {
+                        "alignItems": "center",
+                        "justifyContent": "center",
                         "paddingHorizontal": 8,
                         "paddingVertical": 4,
+                        "position": "relative",
                       },
                       undefined,
                     ]
@@ -2312,8 +2342,11 @@ exports[`useIsFocused renders correctly 1`] = `
                   style={
                     [
                       {
+                        "alignItems": "center",
+                        "justifyContent": "center",
                         "paddingHorizontal": 8,
                         "paddingVertical": 4,
+                        "position": "relative",
                       },
                       undefined,
                     ]
@@ -2444,8 +2477,11 @@ exports[`useIsFocused renders correctly 1`] = `
                   style={
                     [
                       {
+                        "alignItems": "center",
+                        "justifyContent": "center",
                         "paddingHorizontal": 8,
                         "paddingVertical": 4,
+                        "position": "relative",
                       },
                       undefined,
                     ]