@@ -4,7 +4,9 @@ import {emailSelector} from '@selectors/Session';
44import { searchResultsErrorSelector } from '@selectors/Snapshot' ;
55import React , { useCallback , useContext , useEffect , useMemo , useRef } from 'react' ;
66import type { ReactNode } from 'react' ;
7- import { FlatList , View } from 'react-native' ;
7+ import { View } from 'react-native' ;
8+ // eslint-disable-next-line no-restricted-imports
9+ import type { ScrollView as RNScrollView } from 'react-native' ;
810import Button from '@components/Button' ;
911import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu' ;
1012import type { DropdownOption } from '@components/ButtonWithDropdownMenu/types' ;
@@ -13,6 +15,7 @@ import {KYCWallContext} from '@components/KYCWall/KYCWallContext';
1315import type { PaymentMethodType } from '@components/KYCWall/types' ;
1416import { LockedAccountContext } from '@components/LockedAccountModalProvider' ;
1517import { usePersonalDetails } from '@components/OnyxListItemProvider' ;
18+ import ScrollView from '@components/ScrollView' ;
1619import type { SearchDateValues } from '@components/Search/FilterComponents/DatePresetFilterBase' ;
1720import DateSelectPopup from '@components/Search/FilterDropdowns/DateSelectPopup' ;
1821import type { PopoverComponentProps } from '@components/Search/FilterDropdowns/DropdownButton' ;
@@ -45,7 +48,6 @@ import {getActiveAdminWorkspaces, getAllTaxRates, isPaidGroupPolicy} from '@libs
4548import { isExpenseReport } from '@libs/ReportUtils' ;
4649import { buildFilterFormValuesFromQuery , buildQueryStringFromFilterFormValues , isFilterSupported , isSearchDatePreset } from '@libs/SearchQueryUtils' ;
4750import { getDatePresets , getFeedOptions , getGroupByOptions , getGroupCurrencyOptions , getHasOptions , getStatusOptions , getTypeOptions , getWithdrawalTypeOptions } from '@libs/SearchUIUtils' ;
48- import shouldAdjustScroll from '@libs/shouldAdjustScroll' ;
4951import CONST from '@src/CONST' ;
5052import type { TranslationPaths } from '@src/languages/types' ;
5153import ONYXKEYS from '@src/ONYXKEYS' ;
@@ -84,7 +86,7 @@ function SearchFiltersBar({
8486 latestBankItems,
8587} : SearchFiltersBarProps ) {
8688 const isFocused = useIsFocused ( ) ;
87- const scrollRef = useRef < FlatList < FilterItem > > ( null ) ;
89+ const scrollRef = useRef < RNScrollView > ( null ) ;
8890 const currentPolicy = usePolicy ( currentSelectedPolicyID ) ;
8991 const [ isUserValidated ] = useOnyx ( ONYXKEYS . ACCOUNT , { selector : isUserValidatedSelector , canBeMissing : true } ) ;
9092 // type, groupBy and status values are not guaranteed to respect the ts type as they come from user input
@@ -732,60 +734,6 @@ function SearchFiltersBar({
732734 } ) ;
733735 } , [ filterFormValues , filters , typeFiltersKeys ] ) ;
734736
735- const prevFiltersLength = useRef ( 0 ) ;
736-
737- useEffect ( ( ) => {
738- return ( ) => {
739- prevFiltersLength . current = filters . length ;
740- } ;
741- } , [ filters . length ] ) ;
742-
743- const adjustScroll = useCallback ( ( ) => {
744- // Workaround for a known React Native bug on Android (https://github.com/facebook/react-native/issues/27504):
745- // When the FlatList is scrolled to the end and the last item is changed, a blank space is left behind.
746- // To fix this, we detect when onEndReached is triggered due to an item deletion,
747- // and programmatically scroll to the end to fill the space.
748- if ( ! shouldAdjustScroll ) {
749- return ;
750- }
751- prevFiltersLength . current = filters . length ;
752- scrollRef . current ?. scrollToEnd ( ) ;
753- } , [ filters . length ] ) ;
754-
755- const renderFilterItem = useCallback (
756- // eslint-disable-next-line react/no-unused-prop-types
757- ( { item} : { item : FilterItem } ) => (
758- < DropdownButton
759- label = { item . label }
760- value = { item . value }
761- PopoverComponent = { item . PopoverComponent }
762- />
763- ) ,
764- [ ] ,
765- ) ;
766-
767- const filterButtonText = useMemo (
768- ( ) => translate ( 'search.filtersHeader' ) + ( hiddenSelectedFilters . length > 0 ? ` (${ hiddenSelectedFilters . length } )` : '' ) ,
769- [ translate , hiddenSelectedFilters . length ] ,
770- ) ;
771-
772- const renderListFooter = useCallback (
773- ( ) => (
774- < Button
775- link
776- small
777- shouldUseDefaultHover = { false }
778- text = { filterButtonText }
779- iconFill = { theme . link }
780- iconHoverFill = { theme . linkHover }
781- icon = { expensifyIcons . Filter }
782- textStyles = { [ styles . textMicroBold ] }
783- onPress = { openAdvancedFilters }
784- />
785- ) ,
786- [ filterButtonText , theme . link , theme . linkHover , styles . textMicroBold , openAdvancedFilters , expensifyIcons ] ,
787- ) ;
788-
789737 if ( hasErrors ) {
790738 return null ;
791739 }
@@ -851,20 +799,35 @@ function SearchFiltersBar({
851799 ) }
852800 </ KYCWall >
853801 ) : (
854- < FlatList
802+ < ScrollView
855803 horizontal
856804 keyboardShouldPersistTaps = "always"
857805 style = { [ styles . flexRow , styles . overflowScroll , styles . flexGrow0 ] }
858806 contentContainerStyle = { [ styles . flexRow , styles . flexGrow0 , styles . gap2 , styles . ph5 ] }
859807 ref = { scrollRef }
860808 showsHorizontalScrollIndicator = { false }
861- data = { filters }
862- keyExtractor = { ( item ) => item . label }
863- renderItem = { renderFilterItem }
864- ListFooterComponent = { renderListFooter }
865- onEndReached = { adjustScroll }
866- onEndReachedThreshold = { 0.75 }
867- />
809+ >
810+ { filters . map ( ( filter ) => (
811+ < DropdownButton
812+ key = { filter . label }
813+ label = { filter . label }
814+ value = { filter . value }
815+ PopoverComponent = { filter . PopoverComponent }
816+ />
817+ ) ) }
818+
819+ < Button
820+ link
821+ small
822+ shouldUseDefaultHover = { false }
823+ text = { translate ( 'search.filtersHeader' ) + ( hiddenSelectedFilters . length > 0 ? ` (${ hiddenSelectedFilters . length } )` : '' ) }
824+ iconFill = { theme . link }
825+ iconHoverFill = { theme . linkHover }
826+ icon = { expensifyIcons . Filter }
827+ textStyles = { [ styles . textMicroBold ] }
828+ onPress = { openAdvancedFilters }
829+ />
830+ </ ScrollView >
868831 ) }
869832 </ View >
870833 ) ;
0 commit comments