Bump flashlist to v2

package.json

@@ -119,7 +119,7 @@
     "@react-navigation/stack": "7.3.3",
     "@react-ng/bounds-observer": "^0.2.1",
     "@rnmapbox/maps": "10.1.33",
-    "@shopify/flash-list": "1.8.2",
+    "@shopify/flash-list": "2.0.3",
     "@ua/react-native-airship": "~24.4.0",
     "awesome-phonenumber": "^5.4.0",
     "babel-polyfill": "^6.26.0",
@@ -410,4 +410,4 @@
     "node": "20.19.3",
     "npm": "10.8.2"
   }
-}
+}

src/components/DisplayNames/index.native.tsx

@@ -8,15 +8,15 @@ import TextWithEmojiFragment from '@pages/home/report/comment/TextWithEmojiFragm
 import type DisplayNamesProps from './types';
 
 // As we don't have to show tooltips of the Native platform so we simply render the full display names list.
-function DisplayNames({accessibilityLabel, fullTitle, textStyles = [], numberOfLines = 1, renderAdditionalText}: DisplayNamesProps) {
+function DisplayNames({accessibilityLabel, fullTitle, textStyles = [], numberOfLines = 1, renderAdditionalText, testID}: DisplayNamesProps) {
     const {translate} = useLocalize();
     const titleContainsTextAndCustomEmoji = useMemo(() => containsCustomEmoji(fullTitle) && !containsOnlyCustomEmoji(fullTitle), [fullTitle]);
     return (
         <Text
             accessibilityLabel={accessibilityLabel}
             style={textStyles}
             numberOfLines={numberOfLines}
-            testID={DisplayNames.displayName}
+            testID={`${DisplayNames.displayName}${testID !== undefined ? `-${testID}` : ''}`}
         >
             {titleContainsTextAndCustomEmoji ? (
                 <TextWithEmojiFragment

src/components/DisplayNames/types.ts

@@ -45,6 +45,9 @@ type DisplayNamesProps = {
 
     /** Additional Text component to render after the displayNames */
     renderAdditionalText?: () => React.ReactNode;
+
+    /** TestID indicating order */
+    testID?: number;
 };
 
 export default DisplayNamesProps;

src/components/EmojiPicker/EmojiPickerMenu/BaseEmojiPickerMenu.tsx

@@ -1,17 +1,15 @@
 import {FlashList} from '@shopify/flash-list';
-import type {ListRenderItem} from '@shopify/flash-list';
-import React, {useMemo} from 'react';
+import type {FlashListRef, ListRenderItem} from '@shopify/flash-list';
+import React from 'react';
 import type {ForwardedRef} from 'react';
-import {StyleSheet, View} from 'react-native';
+import {View} from 'react-native';
 import type {StyleProp, ViewStyle} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import CategoryShortcutBar from '@components/EmojiPicker/CategoryShortcutBar';
 import EmojiSkinToneList from '@components/EmojiPicker/EmojiSkinToneList';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import type {EmojiPickerList, EmojiPickerListItem, HeaderIndices} from '@libs/EmojiUtils';
 import CONST from '@src/CONST';
 
@@ -81,18 +79,9 @@ function ListEmptyComponent() {
 
 function BaseEmojiPickerMenu(
     {headerEmojis, scrollToHeader, isFiltered, listWrapperStyle = [], data, renderItem, stickyHeaderIndices = [], extraData = [], alwaysBounceVertical = false}: BaseEmojiPickerMenuProps,
-    ref: ForwardedRef<FlashList<EmojiPickerListItem>>,
+    ref: ForwardedRef<FlashListRef<EmojiPickerListItem>>,
 ) {
     const styles = useThemeStyles();
-    const {windowWidth} = useWindowDimensions();
-    const {shouldUseNarrowLayout} = useResponsiveLayout();
-
-    // Estimated list size should be a whole integer to avoid floating point precision errors
-    // More info: https://github.com/Expensify/App/issues/34522
-    const listWidth = shouldUseNarrowLayout ? Math.floor(windowWidth) : CONST.EMOJI_PICKER_SIZE.WIDTH;
-
-    const flattenListWrapperStyle = useMemo(() => StyleSheet.flatten(listWrapperStyle), [listWrapperStyle]);
-
     return (
         <>
             {!isFiltered && (
@@ -113,8 +102,6 @@ function BaseEmojiPickerMenu(
                     stickyHeaderIndices={stickyHeaderIndices}
                     ListEmptyComponent={ListEmptyComponent}
                     alwaysBounceVertical={alwaysBounceVertical}
-                    estimatedItemSize={CONST.EMOJI_PICKER_ITEM_HEIGHT}
-                    estimatedListSize={{height: flattenListWrapperStyle.height as number, width: listWidth}}
                     contentContainerStyle={styles.ph4}
                     extraData={extraData}
                     getItemType={getItemType}

src/components/EmojiPicker/EmojiPickerMenu/index.tsx

@@ -259,7 +259,13 @@ function EmojiPickerMenu({onEmojiSelected, activeEmoji}: EmojiPickerMenuProps, r
 
             if ('header' in item && item.header) {
                 return (
-                    <View style={[styles.emojiHeaderContainer, target === 'StickyHeader' ? styles.stickyHeaderEmoji(shouldUseNarrowLayout, windowWidth) : undefined]}>
+                    <View
+                        style={[
+                            styles.emojiHeaderContainer,
+                            styles.emojiHeaderContainerWidth(shouldUseNarrowLayout, windowWidth),
+                            target === 'StickyHeader' ? styles.stickyHeaderEmoji : undefined,
+                        ]}
+                    >
                         <Text style={styles.textLabelSupporting}>{translate(`emojiPicker.headers.${code}` as TranslationPaths)}</Text>
                     </View>
                 );

src/components/EmojiPicker/EmojiPickerMenu/useEmojiPickerMenu.ts

@@ -1,4 +1,4 @@
-import type {FlashList} from '@shopify/flash-list';
+import type {FlashListRef} from '@shopify/flash-list';
 import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import emojis from '@assets/emojis';
 import useKeyboardState from '@hooks/useKeyboardState';
@@ -12,7 +12,7 @@ import {getHeaderEmojis, getSpacersIndexes, mergeEmojisWithFrequentlyUsedEmojis,
 import ONYXKEYS from '@src/ONYXKEYS';
 
 const useEmojiPickerMenu = () => {
-    const emojiListRef = useRef<FlashList<EmojiPickerListItem>>(null);
+    const emojiListRef = useRef<FlashListRef<EmojiPickerListItem>>(null);
     const [frequentlyUsedEmojis] = useOnyx(ONYXKEYS.FREQUENTLY_USED_EMOJIS, {canBeMissing: true});
     // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
     const allEmojis = useMemo(() => mergeEmojisWithFrequentlyUsedEmojis(emojis, processFrequentlyUsedEmojis(frequentlyUsedEmojis)), [frequentlyUsedEmojis]);

src/components/LHNOptionsList/LHNOptionsList.tsx

@@ -1,5 +1,5 @@
 import {useIsFocused, useRoute} from '@react-navigation/native';
-import type {FlashListProps} from '@shopify/flash-list';
+import type {FlashListProps, FlashListRef} from '@shopify/flash-list';
 import {FlashList} from '@shopify/flash-list';
 import type {ReactElement} from 'react';
 import React, {memo, useCallback, useContext, useEffect, useMemo, useRef} from 'react';
@@ -10,7 +10,6 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import LottieAnimations from '@components/LottieAnimations';
 import {ScrollOffsetContext} from '@components/ScrollOffsetContextProvider';
 import TextBlock from '@components/TextBlock';
-import useLHNEstimatedListSize from '@hooks/useLHNEstimatedListSize';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useOnyx from '@hooks/useOnyx';
@@ -42,7 +41,7 @@ const keyExtractor = (item: Report) => `report_${item.reportID}`;
 function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optionMode, shouldDisableFocusOptions = false, onFirstItemRendered = () => {}}: LHNOptionsListProps) {
     const {saveScrollOffset, getScrollOffset, saveScrollIndex, getScrollIndex} = useContext(ScrollOffsetContext);
     const {isOffline} = useNetwork();
-    const flashListRef = useRef<FlashList<Report>>(null);
+    const flashListRef = useRef<FlashListRef<Report>>(null);
     const route = useRoute();
     const isScreenFocused = useIsFocused();
 
@@ -63,7 +62,6 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio
     const theme = useTheme();
     const styles = useThemeStyles();
     const {translate, preferredLocale, localeCompare} = useLocalize();
-    const estimatedListSize = useLHNEstimatedListSize();
     const isReportsSplitNavigatorLast = useRootNavigationState((state) => state?.routes?.at(-1)?.name === NAVIGATORS.REPORTS_SPLIT_NAVIGATOR);
     const shouldShowEmptyLHN = data.length === 0;
     const estimatedItemSize = optionMode === CONST.OPTION_MODE.COMPACT ? variables.optionRowHeightCompact : variables.optionRowHeight;
@@ -161,7 +159,7 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio
      * Function which renders a row in the list
      */
     const renderItem = useCallback(
-        ({item}: RenderItemProps): ReactElement => {
+        ({item, index}: RenderItemProps): ReactElement => {
             const reportID = item.reportID;
             const itemParentReport = reports?.[`${ONYXKEYS.COLLECTION.REPORT}${item.parentReportID}`];
             const itemReportNameValuePairs = reportNameValuePairs?.[`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${reportID}`];
@@ -248,6 +246,7 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio
                     isReportsSplitNavigatorLast={isReportsSplitNavigatorLast}
                     isScreenFocused={isScreenFocused}
                     localeCompare={localeCompare}
+                    testID={index}
                     isReportArchived={isReportArchived}
                 />
             );
@@ -398,14 +397,14 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio
                     testID="lhn-options-list"
                     keyExtractor={keyExtractor}
                     renderItem={renderItem}
-                    estimatedItemSize={estimatedItemSize}
-                    overrideProps={{estimatedHeightSize: estimatedItemSize * CONST.LHN_VIEWPORT_ITEM_COUNT}}
                     extraData={extraData}
                     showsVerticalScrollIndicator={false}
                     onLayout={onLayout}
                     onScroll={onScroll}
-                    estimatedListSize={estimatedListSize}
                     initialScrollIndex={isWebOrDesktop ? getScrollIndex(route) : undefined}
+                    maintainVisibleContentPosition={{disabled: true}}
+                    drawDistance={1000}
+                    removeClippedSubviews
                 />
             )}
         </View>

src/components/LHNOptionsList/OptionRowLHN.tsx

@@ -61,6 +61,7 @@ function OptionRowLHN({
     hasDraftComment,
     shouldShowRBRorGBRTooltip,
     isScreenFocused = false,
+    testID,
 }: OptionRowLHNProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -294,6 +295,7 @@ function OptionRowLHN({
                                                         isGroupChat(report) ||
                                                         isSystemChat(report)
                                                     }
+                                                    testID={testID}
                                                 />
                                                 {isChatUsedForOnboarding && <FreeTrial badgeStyles={[styles.mnh0, styles.pl2, styles.pr2, styles.ml1, styles.flexShrink1]} />}
                                                 {isStatusVisible && (

src/components/LHNOptionsList/OptionRowRendererComponent/index.native.tsx

@@ -1,12 +1,22 @@
-import {CellContainer} from '@shopify/flash-list';
-import type {CellContainerProps} from '@shopify/flash-list/dist/native/cell-container/CellContainer';
-import type {ForwardedRef} from 'react';
 import {forwardRef} from 'react';
-import type {View} from 'react-native';
+import type {ForwardedRef} from 'react';
+import type {StyleProp, ViewStyle} from 'react-native';
+import {View} from 'react-native';
+
+type OptionRowRendererComponentProps = {
+    /** The index position of this option row in the list */
+    index: number;
+
+    /** Callback function called when the component layout changes */
+    onLayout?: () => void;
+
+    /** Style prop for customizing the option row */
+    style?: StyleProp<ViewStyle>;
+};
 
-function OptionRowRendererComponent(props: CellContainerProps, ref: ForwardedRef<View>) {
+function OptionRowRendererComponent(props: OptionRowRendererComponentProps, ref: ForwardedRef<View>) {
     return (
-        <CellContainer
+        <View
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
             ref={ref}

src/components/LHNOptionsList/types.ts

@@ -1,4 +1,3 @@
-import type {ContentStyle} from '@shopify/flash-list';
 import type {RefObject} from 'react';
 import type {LayoutChangeEvent, StyleProp, TextStyle, View, ViewStyle} from 'react-native';
 import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
@@ -16,7 +15,7 @@ type CustomLHNOptionsListProps = {
     style?: StyleProp<ViewStyle>;
 
     /** Extra styles for the section list container */
-    contentContainerStyles?: StyleProp<ContentStyle>;
+    contentContainerStyles?: StyleProp<ViewStyle>;
 
     /** List of reports */
     data: Report[];
@@ -129,6 +128,9 @@ type OptionRowLHNDataProps = {
     /** Function to compare locale strings */
     localeCompare: LocaleContextProps['localeCompare'];
 
+    /** TestID of the row, indicating order */
+    testID: number;
+
     /** Whether the report is archived */
     isReportArchived: boolean;
 };
@@ -177,8 +179,11 @@ type OptionRowLHNProps = {
 
     /** Whether the screen is focused */
     isScreenFocused?: boolean;
+
+    /** The testID of the row */
+    testID: number;
 };
 
-type RenderItemProps = {item: Report};
+type RenderItemProps = {item: Report; index: number};
 
 export type {LHNOptionsListProps, OptionRowLHNDataProps, OptionRowLHNProps, RenderItemProps};

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

@@ -17,11 +17,7 @@ function BaseSearchList({
     ListFooterComponent,
     onViewableItemsChanged,
     onLayout,
-    estimatedItemSize,
-    overrideItemLayout,
-    estimatedListSize,
     contentContainerStyle,
-    calculatedListHeight,
 }: BaseSearchListProps) {
     const renderItemWithoutKeyboardFocus = useCallback(
         ({item}: {item: SearchListItem; index: number}) => {
@@ -45,11 +41,8 @@ function BaseSearchList({
             onLayout={onLayout}
             removeClippedSubviews
             drawDistance={1000}
-            estimatedItemSize={estimatedItemSize}
-            overrideItemLayout={overrideItemLayout}
-            estimatedListSize={estimatedListSize}
             contentContainerStyle={contentContainerStyle}
-            overrideProps={{estimatedHeightSize: calculatedListHeight}}
+            maintainVisibleContentPosition={{disabled: true}}
         />
     );
 }