diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index 698591d22bfd..c55391338b2b 100644 --- a/src/components/Button/index.tsx +++ b/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 & { /** 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( )} { if (event?.type === 'click') { const currentTarget = event?.currentTarget as HTMLElement; diff --git a/src/components/Search/SearchStatusBar.tsx b/src/components/Search/SearchStatusBar.tsx index b8b2b3fd05d0..6ef44e2c94f2 100644 --- a/src/components/Search/SearchStatusBar.tsx +++ b/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(null); + const isScrolledRef = useRef(false); return ( { + 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} diff --git a/src/pages/Search/SearchTypeMenuNarrow.tsx b/src/pages/Search/SearchTypeMenuNarrow.tsx index 0aa01dbb9fe4..174117174897 100644 --- a/src/pages/Search/SearchTypeMenuNarrow.tsx +++ b/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}) => ( - + {menuTitle}