🍒 Cherry pick PR #38071 to staging 🍒

android/app/build.gradle

@@ -98,8 +98,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001045002
-        versionName "1.4.50-2"
+        versionCode 1001045003
+        versionName "1.4.50-3"
     }
 
     flavorDimensions "default"

ios/NewExpensify/Info.plist

@@ -40,7 +40,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.4.50.2</string>
+	<string>1.4.50.3</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

ios/NewExpensifyTests/Info.plist

@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.4.50.2</string>
+	<string>1.4.50.3</string>
 </dict>
 </plist>

ios/NotificationServiceExtension/Info.plist

@@ -13,7 +13,7 @@
 	<key>CFBundleShortVersionString</key>
 	<string>1.4.50</string>
 	<key>CFBundleVersion</key>
-	<string>1.4.50.2</string>
+	<string>1.4.50.3</string>
 	<key>NSExtension</key>
 	<dict>
 		<key>NSExtensionPointIdentifier</key>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.4.50-2",
+  "version": "1.4.50-3",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",

src/components/FlatList/index.android.tsx

@@ -1,7 +1,7 @@
 import {useFocusEffect} from '@react-navigation/native';
 import type {ForwardedRef} from 'react';
 import React, {forwardRef, useCallback, useContext} from 'react';
-import type {FlatListProps, NativeScrollEvent, NativeSyntheticEvent} from 'react-native';
+import type {FlatListProps} from 'react-native';
 import {FlatList} from 'react-native';
 import {ActionListContext} from '@pages/home/ReportScreenContext';
 
@@ -22,9 +22,6 @@ function CustomFlatList<T>(props: FlatListProps<T>, ref: ForwardedRef<FlatList>)
         }
     }, [scrollPosition?.offset, ref]);
 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const onMomentumScrollEnd = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => setScrollPosition({offset: event.nativeEvent.contentOffset.y}), []);
-
     useFocusEffect(
         useCallback(() => {
             onScreenFocus();
@@ -35,8 +32,10 @@ function CustomFlatList<T>(props: FlatListProps<T>, ref: ForwardedRef<FlatList>)
         <FlatList<T>
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
-            onScroll={props.onScroll}
-            onMomentumScrollEnd={onMomentumScrollEnd}
+            onScroll={(event) => props.onScroll?.(event)}
+            onMomentumScrollEnd={(event) => {
+                setScrollPosition({offset: event.nativeEvent.contentOffset.y});
+            }}
             ref={ref}
         />
     );

src/components/HeaderWithBackButton/types.ts

@@ -1,9 +1,9 @@
 import type {ReactNode} from 'react';
-import type {OnyxEntry} from 'react-native-onyx';
+import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import type {Action} from '@hooks/useSingleExecution';
 import type {StepCounterParams} from '@src/languages/types';
 import type {AnchorPosition} from '@src/styles';
-import type {Policy, Report} from '@src/types/onyx';
+import type {PersonalDetails, Policy, Report} from '@src/types/onyx';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 import type IconAsset from '@src/types/utils/IconAsset';
 
@@ -101,6 +101,9 @@ type HeaderWithBackButtonProps = Partial<ChildrenProps> & {
     /** The report's policy, if we're showing the details for a report and need info about it for AvatarWithDisplay */
     policy?: OnyxEntry<Policy>;
 
+    /** Policies, if we're showing the details for a report and need participant details for AvatarWithDisplay */
+    personalDetails?: OnyxCollection<PersonalDetails>;
+
     /** Single execution function to prevent concurrent navigation actions */
     singleExecution?: <T extends unknown[]>(action: Action<T>) => Action<T>;
 

src/components/InvertedFlatList/BaseInvertedFlatList.tsx

@@ -6,19 +6,17 @@ import FlatList from '@components/FlatList';
 const WINDOW_SIZE = 15;
 const AUTOSCROLL_TO_TOP_THRESHOLD = 128;
 
-const maintainVisibleContentPosition = {
-    minIndexForVisible: 0,
-    autoscrollToTopThreshold: AUTOSCROLL_TO_TOP_THRESHOLD,
-};
-
 function BaseInvertedFlatList<T>(props: FlatListProps<T>, ref: ForwardedRef<FlatList>) {
     return (
         <FlatList
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
             ref={ref}
             windowSize={WINDOW_SIZE}
-            maintainVisibleContentPosition={maintainVisibleContentPosition}
+            maintainVisibleContentPosition={{
+                minIndexForVisible: 0,
+                autoscrollToTopThreshold: AUTOSCROLL_TO_TOP_THRESHOLD,
+            }}
             inverted
         />
     );

src/components/LHNOptionsList/LHNOptionsList.tsx

@@ -1,8 +1,9 @@
 import {FlashList} from '@shopify/flash-list';
 import type {ReactElement} from 'react';
-import React, {memo, useCallback, useMemo} from 'react';
+import React, {memo, useCallback} from 'react';
 import {StyleSheet, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
+import withCurrentReportID from '@components/withCurrentReportID';
 import usePermissions from '@hooks/usePermissions';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
@@ -27,6 +28,7 @@ function LHNOptionsList({
     preferredLocale = CONST.LOCALES.DEFAULT,
     personalDetails = {},
     transactions = {},
+    currentReportID = '',
     draftComments = {},
     transactionViolations = {},
     onFirstItemRendered = () => {},
@@ -84,7 +86,7 @@ function LHNOptionsList({
                     lastReportActionTransaction={lastReportActionTransaction}
                     receiptTransactions={transactions}
                     viewMode={optionMode}
-                    isFocused={!shouldDisableFocusOptions}
+                    isFocused={!shouldDisableFocusOptions && reportID === currentReportID}
                     onSelectRow={onSelectRow}
                     preferredLocale={preferredLocale}
                     comment={itemComment}
@@ -96,6 +98,7 @@ function LHNOptionsList({
             );
         },
         [
+            currentReportID,
             draftComments,
             onSelectRow,
             optionMode,
@@ -113,8 +116,6 @@ function LHNOptionsList({
         ],
     );
 
-    const extraData = useMemo(() => [reportActions, reports, policy, personalDetails], [reportActions, reports, policy, personalDetails]);
-
     return (
         <View style={style ?? styles.flex1}>
             <FlashList
@@ -126,7 +127,7 @@ function LHNOptionsList({
                 keyExtractor={keyExtractor}
                 renderItem={renderItem}
                 estimatedItemSize={optionMode === CONST.OPTION_MODE.COMPACT ? variables.optionRowHeightCompact : variables.optionRowHeight}
-                extraData={extraData}
+                extraData={[currentReportID]}
                 showsVerticalScrollIndicator={false}
             />
         </View>
@@ -135,31 +136,33 @@ function LHNOptionsList({
 
 LHNOptionsList.displayName = 'LHNOptionsList';
 
-export default withOnyx<LHNOptionsListProps, LHNOptionsListOnyxProps>({
-    reports: {
-        key: ONYXKEYS.COLLECTION.REPORT,
-    },
-    reportActions: {
-        key: ONYXKEYS.COLLECTION.REPORT_ACTIONS,
-    },
-    policy: {
-        key: ONYXKEYS.COLLECTION.POLICY,
-    },
-    preferredLocale: {
-        key: ONYXKEYS.NVP_PREFERRED_LOCALE,
-    },
-    personalDetails: {
-        key: ONYXKEYS.PERSONAL_DETAILS_LIST,
-    },
-    transactions: {
-        key: ONYXKEYS.COLLECTION.TRANSACTION,
-    },
-    draftComments: {
-        key: ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT,
-    },
-    transactionViolations: {
-        key: ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS,
-    },
-})(memo(LHNOptionsList));
+export default withCurrentReportID(
+    withOnyx<LHNOptionsListProps, LHNOptionsListOnyxProps>({
+        reports: {
+            key: ONYXKEYS.COLLECTION.REPORT,
+        },
+        reportActions: {
+            key: ONYXKEYS.COLLECTION.REPORT_ACTIONS,
+        },
+        policy: {
+            key: ONYXKEYS.COLLECTION.POLICY,
+        },
+        preferredLocale: {
+            key: ONYXKEYS.NVP_PREFERRED_LOCALE,
+        },
+        personalDetails: {
+            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
+        },
+        transactions: {
+            key: ONYXKEYS.COLLECTION.TRANSACTION,
+        },
+        draftComments: {
+            key: ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT,
+        },
+        transactionViolations: {
+            key: ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS,
+        },
+    })(memo(LHNOptionsList)),
+);
 
 export type {LHNOptionsListProps};

src/components/LHNOptionsList/OptionRowLHNData.tsx

@@ -1,6 +1,5 @@
 import {deepEqual} from 'fast-equals';
 import React, {useEffect, useMemo, useRef} from 'react';
-import useCurrentReportID from '@hooks/useCurrentReportID';
 import * as ReportUtils from '@libs/ReportUtils';
 import SidebarUtils from '@libs/SidebarUtils';
 import * as Report from '@userActions/Report';
@@ -33,8 +32,6 @@ function OptionRowLHNData({
     ...propsToForward
 }: OptionRowLHNDataProps) {
     const reportID = propsToForward.reportID;
-    const currentReportIDValue = useCurrentReportID();
-    const isReportFocused = isFocused && currentReportIDValue?.currentReportID === reportID;
 
     const optionItemRef = useRef<OptionData>();
 
@@ -88,7 +85,7 @@ function OptionRowLHNData({
         <OptionRowLHN
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...propsToForward}
-            isFocused={isReportFocused}
+            isFocused={isFocused}
             optionItem={optionItem}
         />
     );

src/components/LHNOptionsList/types.ts

@@ -3,6 +3,7 @@ import type {RefObject} from 'react';
 import type {LayoutChangeEvent, StyleProp, TextStyle, View, ViewStyle} from 'react-native';
 import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
+import type {CurrentReportIDContextValue} from '@components/withCurrentReportID';
 import type CONST from '@src/CONST';
 import type {OptionData} from '@src/libs/ReportUtils';
 import type {Locale, PersonalDetailsList, Policy, Report, ReportAction, ReportActions, Transaction, TransactionViolation} from '@src/types/onyx';
@@ -63,7 +64,7 @@ type CustomLHNOptionsListProps = {
     reportIDsWithErrors: Record<string, OnyxCommon.Errors>;
 };
 
-type LHNOptionsListProps = CustomLHNOptionsListProps & LHNOptionsListOnyxProps;
+type LHNOptionsListProps = CustomLHNOptionsListProps & CurrentReportIDContextValue & LHNOptionsListOnyxProps;
 
 type OptionRowLHNDataProps = {
     /** Whether row should be focused */

src/components/MoneyReportHeader.tsx

@@ -20,6 +20,7 @@ import ConfirmModal from './ConfirmModal';
 import HeaderWithBackButton from './HeaderWithBackButton';
 import * as Expensicons from './Icon/Expensicons';
 import MoneyReportHeaderStatusBar from './MoneyReportHeaderStatusBar';
+import {usePersonalDetails} from './OnyxProvider';
 import SettlementButton from './SettlementButton';
 
 type PaymentType = DeepValueOf<typeof CONST.IOU.PAYMENT_TYPE>;
@@ -44,6 +45,7 @@ type MoneyReportHeaderProps = MoneyReportHeaderOnyxProps & {
 };
 
 function MoneyReportHeader({session, policy, chatReport, nextStep, report: moneyRequestReport}: MoneyReportHeaderProps) {
+    const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {windowWidth, isSmallScreenWidth} = useWindowDimensions();
@@ -100,6 +102,7 @@ function MoneyReportHeader({session, policy, chatReport, nextStep, report: money
                 shouldShowPinButton={false}
                 report={moneyRequestReport}
                 policy={policy}
+                personalDetails={personalDetails}
                 shouldShowBackButton={isSmallScreenWidth}
                 onBackButtonPress={() => Navigation.goBack(undefined, false, true)}
                 // Shows border if no buttons or next steps are showing below the header

src/components/MoneyRequestHeader.tsx

@@ -21,6 +21,7 @@ import HeaderWithBackButton from './HeaderWithBackButton';
 import HoldBanner from './HoldBanner';
 import * as Expensicons from './Icon/Expensicons';
 import MoneyRequestHeaderStatusBar from './MoneyRequestHeaderStatusBar';
+import {usePersonalDetails} from './OnyxProvider';
 import ProcessMoneyRequestHoldMenu from './ProcessMoneyRequestHoldMenu';
 
 type MoneyRequestHeaderOnyxProps = {
@@ -53,6 +54,7 @@ type MoneyRequestHeaderProps = MoneyRequestHeaderOnyxProps & {
 };
 
 function MoneyRequestHeader({session, parentReport, report, parentReportAction, transaction, shownHoldUseExplanation = false, policy}: MoneyRequestHeaderProps) {
+    const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false);
@@ -165,6 +167,7 @@ function MoneyRequestHeader({session, parentReport, report, parentReportAction,
                         ownerAccountID: parentReport?.ownerAccountID,
                     }}
                     policy={policy}
+                    personalDetails={personalDetails}
                     shouldShowBackButton={isSmallScreenWidth}
                     onBackButtonPress={() => Navigation.goBack(undefined, false, true)}
                 />