Cmartins list item hook

src/components/Search/SearchList/BaseSearchList/index.native.tsx

@@ -1,10 +1,10 @@
 import {FlashList} from '@shopify/flash-list';
 import React, {useCallback} from 'react';
 import Animated from 'react-native-reanimated';
-import type {SearchListItem} from '@components/SelectionListWithSections/types';
 import type BaseSearchListProps from './types';
+import type {SearchListDataItem} from './types';
 
-const AnimatedFlashListComponent = Animated.createAnimatedComponent(FlashList<SearchListItem>);
+const AnimatedFlashListComponent = Animated.createAnimatedComponent(FlashList<SearchListDataItem>);
 
 function BaseSearchList({
     data,
@@ -20,7 +20,7 @@ function BaseSearchList({
     contentContainerStyle,
 }: BaseSearchListProps) {
     const renderItemWithoutKeyboardFocus = useCallback(
-        ({item, index}: {item: SearchListItem; index: number}) => {
+        ({item, index}: {item: SearchListDataItem; index: number}) => {
             return renderItem(item, index, false, undefined);
         },
         [renderItem],

src/components/Search/SearchList/BaseSearchList/index.tsx

@@ -3,15 +3,16 @@ import {FlashList} from '@shopify/flash-list';
 import React, {useCallback, useEffect, useMemo, useRef} from 'react';
 import type {NativeSyntheticEvent} from 'react-native';
 import Animated from 'react-native-reanimated';
-import type {ExtendedTargetedEvent, SearchListItem} from '@components/SelectionListWithSections/types';
+import type {ExtendedTargetedEvent} from '@components/SelectionListWithSections/types';
 import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 import {isMobileChrome} from '@libs/Browser';
 import {addKeyDownPressListener, removeKeyDownPressListener} from '@libs/KeyboardShortcut/KeyDownPressListener';
 import CONST from '@src/CONST';
 import type BaseSearchListProps from './types';
+import type {SearchListDataItem} from './types';
 
-const AnimatedFlashListComponent = Animated.createAnimatedComponent(FlashList<SearchListItem>);
+const AnimatedFlashListComponent = Animated.createAnimatedComponent(FlashList<SearchListDataItem>);
 
 function BaseSearchList({
     data,
@@ -58,7 +59,7 @@ function BaseSearchList({
     });
 
     const renderItemWithKeyboardFocus = useCallback(
-        ({item, index}: {item: SearchListItem; index: number}) => {
+        ({item, index}: {item: SearchListDataItem; index: number}) => {
             const isItemFocused = focusedIndex === index;
 
             const onFocus = (event: NativeSyntheticEvent<ExtendedTargetedEvent>) => {

src/components/Search/SearchList/BaseSearchList/types.ts

@@ -1,12 +1,14 @@
 import type {FlashListProps, FlashListRef} from '@shopify/flash-list';
 import type {ForwardedRef} from 'react';
 import type {NativeSyntheticEvent} from 'react-native';
-import type {SearchColumnType, SelectedTransactions} from '@components/Search/types';
+import type {SearchColumnType, SearchListItemDescriptor, SelectedTransactions} from '@components/Search/types';
 import type {ExtendedTargetedEvent, SearchListItem} from '@components/SelectionListWithSections/types';
 import type {Transaction} from '@src/types/onyx';
 
+export type SearchListDataItem = SearchListItem | SearchListItemDescriptor;
+
 type BaseSearchListProps = Pick<
-    FlashListProps<SearchListItem>,
+    FlashListProps<SearchListDataItem>,
     | 'onScroll'
     | 'contentContainerStyle'
     | 'onEndReached'
@@ -17,11 +19,11 @@ type BaseSearchListProps = Pick<
     | 'showsVerticalScrollIndicator'
     | 'onLayout'
 > & {
-    /** The data to display in the list */
-    data: SearchListItem[];
+    /** The data to display in the list (full items or descriptors when using useSearchListItem) */
+    data: SearchListDataItem[];
 
     /** The function to render each item in the list */
-    renderItem: (item: SearchListItem, index: number, isItemFocused: boolean, onFocus?: (event: NativeSyntheticEvent<ExtendedTargetedEvent>) => void) => React.JSX.Element;
+    renderItem: (item: SearchListDataItem, index: number, isItemFocused: boolean, onFocus?: (event: NativeSyntheticEvent<ExtendedTargetedEvent>) => void) => React.JSX.Element;
 
     /** The columns that might change to trigger re-render via extraData */
     columns: SearchColumnType[];
@@ -32,11 +34,11 @@ type BaseSearchListProps = Pick<
     /** The length of the flattened items in the list */
     flattenedItemsLength: number;
 
-    /** The callback, which is run when a row is pressed */
-    onSelectRow: (item: SearchListItem) => void;
+    /** The callback, which is run when a row is pressed (receives item or descriptor when using descriptor flow) */
+    onSelectRow: (item: SearchListDataItem) => void;
 
     /** The ref to the list */
-    ref: ForwardedRef<FlashListRef<SearchListItem>>;
+    ref: ForwardedRef<FlashListRef<SearchListDataItem>>;
 
     /** The function to scroll to an index */
     scrollToIndex?: (index: number, animated?: boolean) => void;