Make PushRowModal use new SelectionList

src/components/PushRowWithModal/PushRowModal.tsx

@@ -2,8 +2,8 @@ import React, {useMemo} from 'react';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Modal from '@components/Modal';
 import ScreenWrapper from '@components/ScreenWrapper';
-import SelectionList from '@components/SelectionListWithSections';
-import RadioListItem from '@components/SelectionListWithSections/RadioListItem';
+import SelectionList from '@components/SelectionList';
+import RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
 import useDebouncedState from '@hooks/useDebouncedState';
 import useLocalize from '@hooks/useLocalize';
 import searchOptions from '@libs/searchOptions';
@@ -68,7 +68,16 @@ function PushRowModal({isVisible, selectedOption, onOptionChange, onClose, optio
     };
 
     const searchResults = searchOptions(debouncedSearchValue, options);
-    const headerMessage = debouncedSearchValue.trim() && !searchResults.length ? translate('common.noResultsFound') : '';
+
+    const textInputOptions = useMemo(
+        () => ({
+            headerMessage: debouncedSearchValue.trim() && !searchResults.length ? translate('common.noResultsFound') : '',
+            label: searchInputTitle,
+            value: searchValue,
+            onChangeText: setSearchValue,
+        }),
+        [debouncedSearchValue, searchInputTitle, searchResults.length, searchValue, setSearchValue, translate],
+    );
 
     return (
         <Modal
@@ -89,16 +98,14 @@ function PushRowModal({isVisible, selectedOption, onOptionChange, onClose, optio
                     onBackButtonPress={onClose}
                 />
                 <SelectionList
-                    headerMessage={headerMessage}
-                    textInputLabel={searchInputTitle}
-                    textInputValue={searchValue}
-                    onChangeText={setSearchValue}
+                    data={searchResults}
+                    ListItem={RadioListItem}
                     onSelectRow={handleSelectRow}
-                    sections={[{data: searchResults}]}
-                    initiallyFocusedOptionKey={selectedOption}
-                    showScrollIndicator
+                    textInputOptions={textInputOptions}
+                    initiallyFocusedItemKey={selectedOption}
+                    disableMaintainingScrollPosition
                     shouldShowTooltips={false}
-                    ListItem={RadioListItem}
+                    showScrollIndicator
                 />
             </ScreenWrapper>
         </Modal>

src/components/SelectionList/BaseSelectionList.tsx

@@ -65,6 +65,7 @@ function BaseSelectionList<TItem extends ListItem>({
     showScrollIndicator = true,
     canSelectMultiple = false,
     disableKeyboardShortcuts = false,
+    disableMaintainingScrollPosition = false,
     shouldUseUserSkeletonView,
     shouldShowTooltips = true,
     shouldIgnoreFocus = false,
@@ -410,6 +411,7 @@ function BaseSelectionList<TItem extends ListItem>({
                         style={style?.listStyle as ViewStyle}
                         initialScrollIndex={initialFocusedIndex}
                         onScrollBeginDrag={onScrollBeginDrag}
+                        maintainVisibleContentPosition={{disabled: disableMaintainingScrollPosition}}
                         ListHeaderComponent={
                             <>
                                 {customListHeaderContent}

src/components/SelectionList/types.ts

@@ -111,6 +111,9 @@ type SelectionListProps<TItem extends ListItem> = {
     /** Whether keyboard shortcuts should be disabled */
     disableKeyboardShortcuts?: boolean;
 
+    /** Whether scroll position should change when focused item changes */
+    disableMaintainingScrollPosition?: boolean;
+
     /** Whether to use the user skeleton view */
     shouldUseUserSkeletonView?: boolean;