Scroll into view the search status button

src/components/Button/index.tsx

@@ -1,7 +1,7 @@
 import {useIsFocused} from '@react-navigation/native';
 import type {ForwardedRef} from 'react';
 import React, {useCallback, useMemo, useState} from 'react';
-import type {GestureResponderEvent, StyleProp, TextStyle, ViewStyle} from 'react-native';
+import type {GestureResponderEvent, LayoutChangeEvent, StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {ActivityIndicator, View} from 'react-native';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
@@ -53,6 +53,9 @@ type ButtonProps = Partial<ChildrenProps> & {
     /** Indicates whether the button should be disabled */
     isDisabled?: boolean;
 
+    /** Invoked on mount and layout changes */
+    onLayout?: (event: LayoutChangeEvent) => void;
+
     /** A function that is called when the button is clicked on */
     onPress?: (event?: GestureResponderEvent | KeyboardEvent) => void;
 
@@ -192,6 +195,7 @@ function Button(
         isLoading = false,
         isDisabled = false,
 
+        onLayout = () => {},
         onPress = () => {},
         onLongPress = () => {},
         onPressIn = () => {},
@@ -325,6 +329,7 @@ function Button(
             )}
             <PressableWithFeedback
                 ref={ref}
+                onLayout={onLayout}
                 onPress={(event) => {
                     if (event?.type === 'click') {
                         const currentTarget = event?.currentTarget as HTMLElement;

src/components/Search/SearchStatusBar.tsx

@@ -1,4 +1,6 @@
-import React from 'react';
+import React, {useRef} from 'react';
+// eslint-disable-next-line no-restricted-imports
+import type {ScrollView as RNScrollView} from 'react-native';
 import Button from '@components/Button';
 import * as Expensicons from '@components/Icon/Expensicons';
 import ScrollView from '@components/ScrollView';
@@ -150,9 +152,12 @@ function SearchStatusBar({type, status, resetOffset}: SearchStatusBarProps) {
     const theme = useTheme();
     const {translate} = useLocalize();
     const options = getOptions(type);
+    const scrollRef = useRef<RNScrollView>(null);
+    const isScrolledRef = useRef(false);
 
     return (
         <ScrollView
+            ref={scrollRef}
             style={[styles.flexRow, styles.mb5, styles.overflowScroll, styles.flexGrow0]}
             horizontal
             showsHorizontalScrollIndicator={false}
@@ -169,6 +174,13 @@ function SearchStatusBar({type, status, resetOffset}: SearchStatusBarProps) {
                 return (
                     <Button
                         key={item.key}
+                        onLayout={(e) => {
+                            if (!isActive || isScrolledRef.current || !('left' in e.nativeEvent.layout)) {
+                                return;
+                            }
+                            isScrolledRef.current = true;
+                            scrollRef.current?.scrollTo({x: (e.nativeEvent.layout.left as number) - styles.pl5.paddingLeft});
+                        }}
                         text={translate(item.text)}
                         onPress={onPress}
                         icon={item.icon}

src/pages/Search/SearchTypeMenuNarrow.tsx

@@ -6,10 +6,12 @@ import PopoverMenu from '@components/PopoverMenu';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import Text from '@components/Text';
 import useSingleExecution from '@hooks/useSingleExecution';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import Navigation from '@libs/Navigation/Navigation';
+import variables from '@styles/variables';
 import * as Expensicons from '@src/components/Icon/Expensicons';
 import ROUTES from '@src/ROUTES';
 import type {SearchTypeMenuItem} from './SearchTypeMenu';
@@ -23,6 +25,7 @@ type SearchTypeMenuNarrowProps = {
 function SearchTypeMenuNarrow({typeMenuItems, activeItemIndex, title}: SearchTypeMenuNarrowProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
+    const StyleUtils = useStyleUtils();
     const {singleExecution} = useSingleExecution();
     const {windowHeight} = useWindowDimensions();
 
@@ -74,21 +77,23 @@ function SearchTypeMenuNarrow({typeMenuItems, activeItemIndex, title}: SearchTyp
                 onPress={openMenu}
             >
                 {({hovered}) => (
-                    <Animated.View style={[styles.tabSelectorButton, styles.tabBackground(hovered, true, theme.border), styles.w100]}>
+                    <Animated.View style={[styles.tabSelectorButton, styles.tabBackground(hovered, true, theme.border), styles.w100, StyleUtils.getHeight(variables.componentSizeNormal)]}>
                         <View style={[styles.flexRow, styles.gap2, styles.alignItemsCenter, titleViewStyles]}>
                             <Icon
                                 src={menuIcon}
                                 fill={theme.icon}
+                                small
                             />
                             <Text
                                 numberOfLines={1}
-                                style={[styles.textStrong, styles.flexShrink1]}
+                                style={[styles.textStrong, styles.flexShrink1, styles.fontSizeLabel]}
                             >
                                 {menuTitle}
                             </Text>
                             <Icon
                                 src={Expensicons.DownArrow}
                                 fill={theme.icon}
+                                small
                             />
                         </View>
                     </Animated.View>