Make ShareTab use new SelectionList

src/components/SelectionList/BaseSelectionList.tsx

@@ -459,7 +459,13 @@ function BaseSelectionList<TItem extends ListItem>({
         }
     }, [onSelectAll, shouldShowTextInput, shouldPreventDefaultFocusOnSelectRow]);
 
-    useImperativeHandle(ref, () => ({scrollAndHighlightItem, scrollToIndex, updateFocusedIndex}), [scrollAndHighlightItem, scrollToIndex, updateFocusedIndex]);
+    useImperativeHandle(ref, () => ({scrollAndHighlightItem, scrollToIndex, updateFocusedIndex, focusTextInput}), [
+        focusTextInput,
+        scrollAndHighlightItem,
+        scrollToIndex,
+        updateFocusedIndex,
+    ]);
+
     return (
         <View style={[styles.flex1, addBottomSafeAreaPadding && !hasFooter && paddingBottomStyle, style?.containerStyle]}>
             {textInputComponent({shouldBeInsideList: false})}

src/components/SelectionList/components/TextInput.tsx

@@ -68,7 +68,7 @@ function TextInput({
     const {label, value, onChangeText, errorText, headerMessage, hint, disableAutoFocus, placeholder, maxLength, inputMode, ref: optionsRef} = options ?? {};
     const resultsFound = headerMessage !== translate('common.noResultsFound');
     const noData = dataLength === 0 && !showLoadingPlaceholder;
-    const shouldShowHeaderMessage = !!headerMessage && (!isLoadingNewOptions || resultsFound || !noData);
+    const shouldShowHeaderMessage = !!headerMessage && (!isLoadingNewOptions || resultsFound || noData);
 
     const focusTimeoutRef = useRef<NodeJS.Timeout | null>(null);
     const mergedRef = mergeRefs<BaseTextInputRef>(ref, optionsRef);

src/components/SelectionList/types.ts

@@ -225,6 +225,9 @@ type SelectionListHandle = {
 
     /** Updates the focused index and optionally scrolls to it */
     updateFocusedIndex: (newFocusedIndex: number, shouldScroll?: boolean) => void;
+
+    /** Sets the focus to the textInput component */
+    focusTextInput: () => void;
 };
 
 type DataDetailsType<TItem extends ListItem> = {

src/pages/Share/ShareTab.tsx

@@ -1,9 +1,11 @@
 import type {Ref} from 'react';
 import React, {useEffect, useImperativeHandle, useMemo, useRef} from 'react';
+import {View} from 'react-native';
 import {useOptionsList} from '@components/OptionListContextProvider';
-import SelectionList from '@components/SelectionListWithSections';
-import InviteMemberListItem from '@components/SelectionListWithSections/InviteMemberListItem';
-import type {SelectionListHandle} from '@components/SelectionListWithSections/types';
+import SelectionList from '@components/SelectionList';
+import InviteMemberListItem from '@components/SelectionList/ListItem/InviteMemberListItem';
+import type {SelectionListHandle} from '@components/SelectionList/types';
+import Text from '@components/Text';
 import useDebouncedState from '@hooks/useDebouncedState';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
@@ -97,19 +99,20 @@ function ShareTab({ref}: ShareTabProps) {
         searchInServer(debouncedTextInputValue.trim());
     }, [debouncedTextInputValue]);
 
-    const styledRecentReports = recentReportsOptions.map((item) => ({
-        ...item,
-        pressableStyle: styles.br2,
-        text: StringUtils.lineBreaksToSpaces(item.text),
-        wrapperStyle: [styles.pr3, styles.pl3],
-    }));
-
-    const [sections, header] = useMemo(() => {
-        const newSections = [];
-        newSections.push({title: textInputValue.trim() === '' ? translate('search.recentChats') : undefined, data: styledRecentReports});
+    const styledRecentReports = useMemo(() => {
+        return recentReportsOptions.map((item, index) => ({
+            ...item,
+            pressableStyle: styles.br2,
+            text: StringUtils.lineBreaksToSpaces(item.text),
+            wrapperStyle: [styles.pr3, styles.pl3],
+            keyForList: `${item.reportID}-${index}`,
+        }));
+    }, [recentReportsOptions, styles]);
+
+    const header = useMemo(() => {
         const headerMessage = getHeaderMessage(styledRecentReports.length !== 0, false, textInputValue.trim(), countryCode, false);
-        return [newSections, headerMessage];
-    }, [textInputValue, styledRecentReports, translate, countryCode]);
+        return headerMessage;
+    }, [textInputValue, styledRecentReports.length, countryCode]);
 
     const onSelectRow = (item: OptionData) => {
         let reportID = item?.reportID ?? CONST.DEFAULT_NUMBER_ID;
@@ -128,21 +131,39 @@ function ShareTab({ref}: ShareTabProps) {
         }
     };
 
+    const textInputOptions = useMemo(
+        () => ({
+            value: textInputValue,
+            label: translate('selectionList.nameEmailOrPhoneNumber'),
+            hint: offlineMessage,
+            onChangeText: setTextInputValue,
+            headerMessage: header,
+            disableAutoFocus: true,
+        }),
+        [textInputValue, setTextInputValue, translate, offlineMessage, header],
+    );
+
+    const customListHeader = useMemo(
+        () =>
+            textInputValue.trim() === '' ? (
+                <View style={[styles.optionsListSectionHeader, styles.justifyContentCenter]}>
+                    <Text style={[styles.ph5, styles.textLabelSupporting]}>{translate('search.recentChats')}</Text>
+                </View>
+            ) : undefined,
+        [textInputValue, styles, translate],
+    );
+
     return (
         <SelectionList
-            sections={areOptionsInitialized ? sections : CONST.EMPTY_ARRAY}
-            textInputValue={textInputValue}
-            textInputLabel={translate('selectionList.nameEmailOrPhoneNumber')}
-            textInputHint={offlineMessage}
-            onChangeText={setTextInputValue}
-            headerMessage={header}
-            sectionListStyle={[styles.ph2, styles.pb2, styles.overscrollBehaviorContain]}
+            data={areOptionsInitialized ? styledRecentReports : (CONST.EMPTY_ARRAY as unknown as never[])}
+            customListHeaderContent={customListHeader}
+            textInputOptions={textInputOptions}
+            style={{listStyle: [styles.ph2, styles.pb2, styles.overscrollBehaviorContain]}}
             ListItem={InviteMemberListItem}
             showLoadingPlaceholder={showLoadingPlaceholder}
             shouldSingleExecuteRowSelect
             onSelectRow={onSelectRow}
             isLoadingNewOptions={!!isSearchingForReports}
-            textInputAutoFocus={false}
             ref={selectionListRef}
         />
     );