Merge pull request #42513 from jp928/jp928/issue/40508

Use flatlist instead of flashlist

src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx

@@ -1,16 +1,12 @@
-import {FlashList} from '@shopify/flash-list';
 import type {ReactElement} from 'react';
-import React, {useCallback, useEffect, useMemo, useRef} from 'react';
-// We take ScrollView from this package to properly handle the scrolling of AutoCompleteSuggestions in chats since one scroll is nested inside another
-import {ScrollView} from 'react-native-gesture-handler';
+import React, {useCallback, useEffect, useRef} from 'react';
+import {FlatList} from 'react-native-gesture-handler';
 import Animated, {Easing, FadeOutDown, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import ColorSchemeWrapper from '@components/ColorSchemeWrapper';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
-import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import type {AutoCompleteSuggestionsProps, RenderSuggestionMenuItemProps} from './types';
 
@@ -45,11 +41,10 @@ function BaseAutoCompleteSuggestions<TSuggestion>({
  isSuggestionPickerLarge,
  keyExtractor,
 }: AutoCompleteSuggestionsProps<TSuggestion>) {
- const {windowWidth, isLargeScreenWidth} = useWindowDimensions();
  const styles = useThemeStyles();
  const StyleUtils = useStyleUtils();
  const rowHeight = useSharedValue(0);
- const scrollRef = useRef<FlashList<TSuggestion>>(null);
+ const scrollRef = useRef<FlatList<TSuggestion>>(null);
  /**
  * Render a suggestion menu item component.
  */
@@ -72,13 +67,7 @@ function BaseAutoCompleteSuggestions<TSuggestion>({
 
  const innerHeight = CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT * suggestions.length;
  const animatedStyles = useAnimatedStyle(() => StyleUtils.getAutoCompleteSuggestionContainerStyle(rowHeight.value));
- const estimatedListSize = useMemo(
- () => ({
- height: CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT * suggestions.length,
- width: (isLargeScreenWidth ? windowWidth - variables.sideBarWidth : windowWidth) - CONST.CHAT_FOOTER_HORIZONTAL_PADDING,
- }),
- [isLargeScreenWidth, suggestions.length, windowWidth],
- );
+
  useEffect(() => {
  rowHeight.value = withTiming(measureHeightOfSuggestionRows(suggestions.length, isSuggestionPickerLarge), {
  duration: 100,
@@ -105,14 +94,11 @@ function BaseAutoCompleteSuggestions<TSuggestion>({
  }}
  >
  <ColorSchemeWrapper>
- <FlashList
- estimatedItemSize={CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT}
- estimatedListSize={estimatedListSize}
+ <FlatList
  ref={scrollRef}
  keyboardShouldPersistTaps="handled"
  data={suggestions}
  renderItem={renderItem}
- renderScrollComponent={ScrollView}
  keyExtractor={keyExtractor}
  removeClippedSubviews={false}
  showsVerticalScrollIndicator={innerHeight > rowHeight.value}