fix: selecting multiple messages doesn't work as expected (V2)

src/components/ActionSheetAwareScrollView/index.tsx

@@ -2,21 +2,18 @@
 // On all other platforms, the action sheet is implemented using the Animated.ScrollView
 import React from 'react';
 import Reanimated from 'react-native-reanimated';
-import useThemeStyles from '@hooks/useThemeStyles';
 import {Actions, ActionSheetAwareScrollViewProvider, useActionSheetAwareScrollViewActions, useActionSheetAwareScrollViewState} from './ActionSheetAwareScrollViewContext';
 import type {ActionSheetAwareScrollViewProps, RenderActionSheetAwareScrollViewComponent} from './types';
 import useActionSheetAwareScrollViewRef from './useActionSheetAwareScrollViewRef';
 
 function ActionSheetAwareScrollView({children, ref, ...restProps}: ActionSheetAwareScrollViewProps) {
     const {onRef} = useActionSheetAwareScrollViewRef(ref);
-    const styles = useThemeStyles();
 
     return (
         <Reanimated.ScrollView
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...restProps}
             ref={onRef}
-            contentContainerStyle={[restProps.contentContainerStyle, restProps.horizontal ? styles.flexRowReverse : styles.flexColumnReverse, styles.justifyContentEnd]}
         >
             {children}
         </Reanimated.ScrollView>

src/components/FlatList/InvertedFlatList/index.native.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import FlatList from '@components/FlatList/FlatList';
+import useFlatListScrollKey from '@components/FlatList/hooks/useFlatListScrollKey';
+import useThemeStyles from '@hooks/useThemeStyles';
+import CellRendererComponent from './CellRendererComponent';
+import shouldRemoveClippedSubviews from './shouldRemoveClippedSubviews';
+import type {InvertedFlatListProps} from './types';
+
+// Adapted from https://github.com/facebook/react-native/blob/29a0d7c3b201318a873db0d1b62923f4ce720049/packages/virtualized-lists/Lists/VirtualizeUtils.js#L237
+function defaultKeyExtractor<T>(item: T | {key: string} | {id: string}, index: number): string {
+    if (item != null) {
+        if (typeof item === 'object' && 'key' in item) {
+            return item.key;
+        }
+        if (typeof item === 'object' && 'id' in item) {
+            return item.id;
+        }
+    }
+    return String(index);
+}
+
+function InvertedFlatList<T>({
+    ref,
+    shouldEnableAutoScrollToTopThreshold,
+    shouldFocusToTopOnMount = false,
+    initialScrollKey,
+    data,
+    onStartReached,
+    renderItem,
+    keyExtractor = defaultKeyExtractor,
+    ...restProps
+}: InvertedFlatListProps<T>) {
+    const {displayedData, maintainVisibleContentPosition, handleStartReached, handleRenderItem, listRef} = useFlatListScrollKey<T>({
+        data,
+        keyExtractor,
+        initialScrollKey,
+        inverted: true,
+        onStartReached,
+        shouldEnableAutoScrollToTopThreshold,
+        renderItem,
+        ref,
+    });
+    const styles = useThemeStyles();
+
+    return (
+        <FlatList<T>
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...restProps}
+            ref={listRef}
+            maintainVisibleContentPosition={maintainVisibleContentPosition}
+            inverted
+            data={displayedData}
+            renderItem={handleRenderItem}
+            keyExtractor={keyExtractor}
+            onStartReached={handleStartReached}
+            CellRendererComponent={CellRendererComponent}
+            removeClippedSubviews={shouldRemoveClippedSubviews}
+            contentContainerStyle={[restProps.contentContainerStyle, shouldFocusToTopOnMount ? styles.justifyContentEnd : undefined]}
+        />
+    );
+}
+
+export default InvertedFlatList;

src/components/FlatList/InvertedFlatList/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import FlatList from '@components/FlatList/FlatList';
 import useFlatListScrollKey from '@components/FlatList/hooks/useFlatListScrollKey';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CellRendererComponent from './CellRendererComponent';
 import shouldRemoveClippedSubviews from './shouldRemoveClippedSubviews';
 import type {InvertedFlatListProps} from './types';
@@ -21,6 +22,7 @@ function defaultKeyExtractor<T>(item: T | {key: string} | {id: string}, index: n
 function InvertedFlatList<T>({
     ref,
     shouldEnableAutoScrollToTopThreshold,
+    shouldFocusToTopOnMount = false,
     initialScrollKey,
     data,
     onStartReached,
@@ -38,6 +40,7 @@ function InvertedFlatList<T>({
         renderItem,
         ref,
     });
+    const styles = useThemeStyles();
 
     return (
         <FlatList<T>
@@ -52,6 +55,11 @@ function InvertedFlatList<T>({
             onStartReached={handleStartReached}
             CellRendererComponent={CellRendererComponent}
             removeClippedSubviews={shouldRemoveClippedSubviews}
+            contentContainerStyle={[
+                restProps.contentContainerStyle,
+                restProps.horizontal ? styles.flexRowReverse : styles.flexColumnReverse,
+                !shouldFocusToTopOnMount ? styles.justifyContentEnd : undefined,
+            ]}
         />
     );
 }

src/components/FlatList/InvertedFlatList/types.ts

@@ -4,6 +4,7 @@ import type {CustomFlatListProps} from '@components/FlatList/FlatList/types';
 
 type InvertedFlatListProps<T> = Omit<CustomFlatListProps<T>, 'data' | 'renderItem' | 'initialScrollIndex'> & {
     shouldEnableAutoScrollToTopThreshold?: boolean;
+    shouldFocusToTopOnMount?: boolean;
     data: T[];
     renderItem: ListRenderItem<T>;
     initialScrollKey?: string | null;

src/pages/inbox/report/PureReportActionItem.tsx

@@ -3,7 +3,7 @@
 import mapValues from 'lodash/mapValues';
 import React, {memo, use, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import type {GestureResponderEvent, TextInput} from 'react-native';
-import {InteractionManager, Keyboard, Platform, View} from 'react-native';
+import {InteractionManager, Keyboard, View} from 'react-native';
 import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import type {Emoji} from '@assets/emojis/types';
@@ -67,6 +67,7 @@
 import {getLatestErrorMessageField, isReceiptError} from '@libs/ErrorUtils';
 import focusComposerWithDelay from '@libs/focusComposerWithDelay';
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
+import getPlatform from '@libs/getPlatform';
 import {isReportMessageAttachment} from '@libs/isReportMessageAttachment';
 import Navigation from '@libs/Navigation/Navigation';
 import {getBankAccountLastFourDigits} from '@libs/PaymentUtils';
@@ -546,6 +547,8 @@
     const {transitionActionSheetState} = ActionSheetAwareScrollView.useActionSheetAwareScrollViewActions();
     const {translate, formatPhoneNumber, localeCompare, formatTravelDate, getLocalDateFromDatetime, datetimeToCalendarTime} = useLocalize();
     const {showConfirmModal} = useConfirmModal();
+    const platform = getPlatform();
+    const isWeb = platform === CONST.PLATFORM.WEB;
     const personalDetail = useCurrentUserPersonalDetails();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const reportID = report?.reportID ?? action?.reportID;
@@ -623,7 +626,7 @@
             clearError(transactionID);
         }
         clearAllRelatedReportActionErrors(reportID, action, originalReportID);
     }, [action, isSendingMoney, reportID, clearAllRelatedReportActionErrors, report, chatReport, clearError]);
 
     const showDismissReceiptErrorModal = useCallback(async () => {
         const result = await showConfirmModal({
@@ -2056,7 +2059,7 @@
                 withoutFocusOnSecondaryInteraction
                 accessibilityLabel={accessibilityLabel}
                 accessibilityHint={translate('accessibilityHints.chatMessage')}
-                accessibilityRole={Platform.OS !== CONST.PLATFORM.WEB ? CONST.ROLE.BUTTON : undefined}
+                accessibilityRole={!isWeb ? CONST.ROLE.BUTTON : undefined}
                 sentryLabel={CONST.SENTRY_LABEL.REPORT.PURE_REPORT_ACTION_ITEM}
             >
                 <Hoverable

src/pages/inbox/report/ReportActionsList.tsx

@@ -918,8 +918,9 @@ function ReportActionsList({
                     data={sortedVisibleReportActions}
                     renderItem={renderItem}
                     renderScrollComponent={renderActionSheetAwareScrollView}
-                    contentContainerStyle={[styles.chatContentScrollView, shouldFocusToTopOnMount ? styles.justifyContentEnd : undefined]}
+                    contentContainerStyle={styles.chatContentScrollView}
                     shouldHideContent={shouldScrollToEndAfterLayout}
+                    shouldFocusToTopOnMount={shouldFocusToTopOnMount}
                     shouldDisableVisibleContentPosition={shouldScrollToEndAfterLayout}
                     showsVerticalScrollIndicator={!shouldScrollToEndAfterLayout}
                     keyExtractor={keyExtractor}