Merge pull request #31649 from esh-g/android-scroll-request

Android - Fix scroll on requesting money

src/components/FlatList/index.android.js

@@ -1,7 +1,8 @@
 import {useFocusEffect} from '@react-navigation/native';
 import PropTypes from 'prop-types';
-import React, {forwardRef, useCallback, useState} from 'react';
+import React, {forwardRef, useCallback, useContext} from 'react';
 import {FlatList} from 'react-native';
+import {ActionListContext} from '@pages/home/ReportScreenContext';
 
 const propTypes = {
     /** Same as for FlatList */
@@ -32,7 +33,7 @@ const defaultProps = {
 // FlatList wrapped with the freeze component will lose its scroll state when frozen (only for Android).
 // CustomFlatList saves the offset and use it for scrollToOffset() when unfrozen.
 function CustomFlatList(props) {
-    const [scrollPosition, setScrollPosition] = useState({});
+    const {scrollPosition, setScrollPosition} = useContext(ActionListContext);
 
     const onScreenFocus = useCallback(() => {
         if (!props.innerRef.current || !scrollPosition.offset) {

src/hooks/useReportScrollManager/index.native.ts

@@ -3,7 +3,7 @@ import {ActionListContext} from '@pages/home/ReportScreenContext';
 import ReportScrollManagerData from './types';
 
 function useReportScrollManager(): ReportScrollManagerData {
-    const flatListRef = useContext(ActionListContext);
+    const {flatListRef, setScrollPosition} = useContext(ActionListContext);
 
     /**
      * Scroll to the provided index.
@@ -24,8 +24,10 @@ function useReportScrollManager(): ReportScrollManagerData {
             return;
         }
 
-        flatListRef.current.scrollToOffset({animated: false, offset: 0});
-    }, [flatListRef]);
+        setScrollPosition({offset: 0});
+
+        flatListRef.current?.scrollToOffset({animated: false, offset: 0});
+    }, [flatListRef, setScrollPosition]);
 
     return {ref: flatListRef, scrollToIndex, scrollToBottom};
 }

src/hooks/useReportScrollManager/index.ts

@@ -3,7 +3,7 @@ import {ActionListContext} from '@pages/home/ReportScreenContext';
 import ReportScrollManagerData from './types';
 
 function useReportScrollManager(): ReportScrollManagerData {
-    const flatListRef = useContext(ActionListContext);
+    const {flatListRef} = useContext(ActionListContext);
 
     /**
      * Scroll to the provided index. On non-native implementations we do not want to scroll when we are scrolling because

src/hooks/useReportScrollManager/types.ts

@@ -1,7 +1,7 @@
-import {ActionListContextType} from '@pages/home/ReportScreenContext';
+import {FlatListRefType} from '@pages/home/ReportScreenContext';
 
 type ReportScrollManagerData = {
-    ref: ActionListContextType;
+    ref: FlatListRefType;
     scrollToIndex: (index: number, isEditing?: boolean) => void;
     scrollToBottom: () => void;
 };

src/libs/actions/IOU.js

@@ -860,6 +860,7 @@ function requestMoney(
     const currentChatReport = isMoneyRequestReport ? ReportUtils.getReport(report.chatReportID) : report;
     const {payerAccountID, payerEmail, iouReport, chatReport, transaction, iouAction, createdChatReportActionID, createdIOUReportActionID, reportPreviewAction, onyxData} =
         getMoneyRequestInformation(currentChatReport, participant, comment, amount, currency, created, merchant, payeeAccountID, payeeEmail, receipt, undefined, category, tag, billable);
+    const activeReportID = isMoneyRequestReport ? report.reportID : chatReport.reportID;
 
     API.write(
         'RequestMoney',
@@ -887,8 +888,8 @@ function requestMoney(
         onyxData,
     );
     resetMoneyRequestInfo();
-    Navigation.dismissModal(isMoneyRequestReport ? report.reportID : chatReport.reportID);
-    Report.notifyNewAction(chatReport.reportID, payeeAccountID);
+    Navigation.dismissModal(activeReportID);
+    Report.notifyNewAction(activeReportID, payeeAccountID);
 }
 
 /**

src/pages/home/ReportScreen.js

@@ -162,6 +162,7 @@ function ReportScreen({
     const prevUserLeavingStatus = usePrevious(userLeavingStatus);
     const [isBannerVisible, setIsBannerVisible] = useState(true);
     const [listHeight, setListHeight] = useState(0);
+    const [scrollPosition, setScrollPosition] = useState({});
 
     const reportID = getReportID(route);
     const {addWorkspaceRoomOrChatPendingAction, addWorkspaceRoomOrChatErrors} = ReportUtils.getReportOfflinePendingActionAndErrors(report);
@@ -371,8 +372,10 @@ function ReportScreen({
         [report, reportMetadata, isLoading, shouldHideReport, isOptimisticDelete, userLeavingStatus],
     );
 
+    const actionListValue = useMemo(() => ({flatListRef, scrollPosition, setScrollPosition}), [flatListRef, scrollPosition, setScrollPosition]);
+
     return (
-        <ActionListContext.Provider value={flatListRef}>
+        <ActionListContext.Provider value={actionListValue}>
             <ReactionListContext.Provider value={reactionListRef}>
                 <ScreenWrapper
                     style={screenWrapperStyle}

src/pages/home/ReportScreenContext.ts

@@ -7,11 +7,17 @@ type ReactionListRef = {
     isActiveReportAction: (actionID: number | string) => boolean;
 };
 
-type ActionListContextType = RefObject<FlatList<unknown>> | null;
+type FlatListRefType = RefObject<FlatList<unknown>> | null;
+
+type ActionListContextType = {
+    flatListRef: FlatListRefType;
+    scrollPosition: {offset: number} | null;
+    setScrollPosition: (position: {offset: number}) => void;
+};
 type ReactionListContextType = RefObject<ReactionListRef> | null;
 
-const ActionListContext = createContext<ActionListContextType>(null);
+const ActionListContext = createContext<ActionListContextType>({flatListRef: null, scrollPosition: null, setScrollPosition: () => {}});
 const ReactionListContext = createContext<ReactionListContextType>(null);
 
 export {ActionListContext, ReactionListContext};
-export type {ReactionListRef, ActionListContextType, ReactionListContextType};
+export type {ReactionListRef, ActionListContextType, ReactionListContextType, FlatListRefType};