From 4ba3da945d1e3a1dfc63ee0287d1d52da8d6ad71 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 22 Jun 2023 00:31:46 +0800 Subject: [PATCH 1/6] replace global ref with local ref --- .../Reactions/ReportActionItemReactions.js | 4 +- src/hooks/useReportScrollManager/index.js | 32 +++ .../useReportScrollManager/index.native.js | 26 +++ src/libs/ReportScrollManager/index.js | 20 +- src/libs/ReportScrollManager/index.native.js | 20 +- src/libs/actions/IOU.js | 7 + src/libs/actions/Report.js | 30 +-- src/pages/home/ReportScreen.js | 204 +++++++++--------- src/pages/home/ReportScreenContext.js | 4 + .../ReactionList/ReactionListRefContext.js | 4 - .../report/ReportActionItemMessageEdit.js | 9 +- src/pages/home/report/ReportActionsList.js | 7 +- src/pages/home/report/ReportActionsView.js | 31 ++- src/pages/iou/MoneyRequestModal.js | 11 +- 14 files changed, 238 insertions(+), 171 deletions(-) create mode 100644 src/hooks/useReportScrollManager/index.js create mode 100644 src/hooks/useReportScrollManager/index.native.js create mode 100644 src/pages/home/ReportScreenContext.js delete mode 100644 src/pages/home/report/ReactionList/ReactionListRefContext.js diff --git a/src/components/Reactions/ReportActionItemReactions.js b/src/components/Reactions/ReportActionItemReactions.js index 8a818e1c7bff..d5da41c9f648 100644 --- a/src/components/Reactions/ReportActionItemReactions.js +++ b/src/components/Reactions/ReportActionItemReactions.js @@ -11,7 +11,7 @@ import * as Report from '../../libs/actions/Report'; import Tooltip from '../Tooltip'; import ReactionTooltipContent from './ReactionTooltipContent'; import * as EmojiUtils from '../../libs/EmojiUtils'; -import ReactionListRefContext from '../../pages/home/report/ReactionList/ReactionListRefContext'; +import ReportScreenContext from '../../pages/home/ReportScreenContext'; const propTypes = { /** @@ -47,7 +47,7 @@ const defaultProps = { }; function ReportActionItemReactions(props) { - const reactionListRef = useContext(ReactionListRefContext); + const {reactionListRef} = useContext(ReportScreenContext); const popoverReactionListAnchor = useRef(null); const reactionsWithCount = _.filter(props.reactions, (reaction) => reaction.users.length > 0); diff --git a/src/hooks/useReportScrollManager/index.js b/src/hooks/useReportScrollManager/index.js new file mode 100644 index 000000000000..419599cb7d54 --- /dev/null +++ b/src/hooks/useReportScrollManager/index.js @@ -0,0 +1,32 @@ +import {useContext} from 'react'; +import ReportScreenContext from '../../pages/home/ReportScreenContext'; + +function useReportScrollManager() { + const {flatListRef} = useContext(ReportScreenContext); + + /** + * Scroll to the provided index. On non-native implementations we do not want to scroll when we are scrolling because + * we are editing a comment. + * + * @param {Object} index + * @param {Boolean} isEditing + */ + const scrollToIndex = (index, isEditing) => { + if (isEditing) { + return; + } + + flatListRef.current.scrollToIndex(index); + }; + + /** + * Scroll to the bottom of the flatlist. + */ + const scrollToBottom = () => { + flatListRef.current.scrollToOffset({animated: false, offset: 0}); + }; + + return {scrollToIndex, scrollToBottom}; +} + +export default useReportScrollManager; diff --git a/src/hooks/useReportScrollManager/index.native.js b/src/hooks/useReportScrollManager/index.native.js new file mode 100644 index 000000000000..2206cd5104d4 --- /dev/null +++ b/src/hooks/useReportScrollManager/index.native.js @@ -0,0 +1,26 @@ +import {useContext} from 'react'; +import ReportScreenContext from '../../pages/home/ReportScreenContext'; + +function useReportScrollManager() { + const {flatListRef} = useContext(ReportScreenContext); + + /** + * Scroll to the provided index. + * + * @param {Object} index + */ + const scrollToIndex = (index) => { + flatListRef.current.scrollToIndex(index); + }; + + /** + * Scroll to the bottom of the flatlist. + */ + const scrollToBottom = () => { + flatListRef.current.scrollToOffset({animated: false, offset: 0}); + }; + + return {scrollToIndex, scrollToBottom}; +} + +export default useReportScrollManager; diff --git a/src/libs/ReportScrollManager/index.js b/src/libs/ReportScrollManager/index.js index f35abb74020a..dd3ca0aa9532 100644 --- a/src/libs/ReportScrollManager/index.js +++ b/src/libs/ReportScrollManager/index.js @@ -1,34 +1,30 @@ -import React from 'react'; - -// This ref is created using React.createRef here because this function is used by a component that doesn't have access -// to the original ref. -const flatListRef = React.createRef(); - /** * Scroll to the provided index. On non-native implementations we do not want to scroll when we are scrolling because * we are editing a comment. * + * @param {Object} ref * @param {Object} index * @param {Boolean} isEditing */ -function scrollToIndex(index, isEditing) { +function scrollToIndex(ref, index, isEditing) { if (isEditing) { return; } - flatListRef.current.scrollToIndex(index); + ref.current.scrollToIndex(index); } /** * Scroll to the bottom of the flatlist. * + * @param {Object} ref */ -function scrollToBottom() { - if (!flatListRef.current) { +function scrollToBottom(ref) { + if (!ref.current) { return; } - flatListRef.current.scrollToOffset({animated: false, offset: 0}); + ref.current.scrollToOffset({animated: false, offset: 0}); } -export {flatListRef, scrollToIndex, scrollToBottom}; +export {scrollToIndex, scrollToBottom}; diff --git a/src/libs/ReportScrollManager/index.native.js b/src/libs/ReportScrollManager/index.native.js index 85a67f51e559..d3eaa422cbc5 100644 --- a/src/libs/ReportScrollManager/index.native.js +++ b/src/libs/ReportScrollManager/index.native.js @@ -1,28 +1,24 @@ -import React from 'react'; - -// This ref is created using React.createRef here because this function is used by a component that doesn't have access -// to the original ref. -const flatListRef = React.createRef(); - /** * Scroll to the provided index. * + * @param {Object} ref * @param {Object} index */ -function scrollToIndex(index) { - flatListRef.current.scrollToIndex(index); +function scrollToIndex(ref, index) { + ref.current.scrollToIndex(index); } /** * Scroll to the bottom of the flatlist. * + * @param {Object} ref */ -function scrollToBottom() { - if (!flatListRef.current) { +function scrollToBottom(ref) { + if (!ref.current) { return; } - flatListRef.current.scrollToOffset({animated: false, offset: 0}); + ref.current.scrollToOffset({animated: false, offset: 0}); } -export {flatListRef, scrollToIndex, scrollToBottom}; +export {scrollToIndex, scrollToBottom}; diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js index eecd26069724..437e0f06d647 100644 --- a/src/libs/actions/IOU.js +++ b/src/libs/actions/IOU.js @@ -16,6 +16,7 @@ import DateUtils from '../DateUtils'; import TransactionUtils from '../TransactionUtils'; import * as ErrorUtils from '../ErrorUtils'; import * as UserUtils from '../UserUtils'; +import * as Report from './Report'; const chatReports = {}; const iouReports = {}; @@ -395,6 +396,7 @@ function requestMoney(report, amount, currency, payeeEmail, payeeAccountID, part {optimisticData, successData, failureData}, ); Navigation.dismissModal(chatReport.reportID); + Report.notifyNewAction(chatReport.reportID, payeeAccountID); } /** @@ -700,6 +702,7 @@ function splitBill(participants, currentUserLogin, currentUserAccountID, amount, ); Navigation.dismissModal(); + Report.notifyNewAction(groupData.chatReportID, currentUserAccountID); } /** @@ -729,6 +732,7 @@ function splitBillAndOpenReport(participants, currentUserLogin, currentUserAccou ); Navigation.dismissModal(groupData.chatReportID); + Report.notifyNewAction(groupData.chatReportID, currentUserAccountID); } /** @@ -1210,6 +1214,7 @@ function sendMoneyElsewhere(report, amount, currency, comment, managerID, recipi API.write('SendMoneyElsewhere', params, {optimisticData, successData, failureData}); Navigation.dismissModal(params.chatReportID); + Report.notifyNewAction(params.chatReportID, managerID); } /** @@ -1226,6 +1231,7 @@ function sendMoneyWithWallet(report, amount, currency, comment, managerID, recip API.write('SendMoneyWithWallet', params, {optimisticData, successData, failureData}); Navigation.dismissModal(params.chatReportID); + Report.notifyNewAction(params.chatReportID, managerID); } /** @@ -1242,6 +1248,7 @@ function sendMoneyViaPaypal(report, amount, currency, comment, managerID, recipi API.write('SendMoneyViaPaypal', params, {optimisticData, successData, failureData}); Navigation.dismissModal(params.chatReportID); + Report.notifyNewAction(params.chatReportID, managerID); asyncOpenURL(Promise.resolve(), buildPayPalPaymentUrl(amount, recipient.payPalMeAddress, currency)); } diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js index 4cf90dbcb1ab..a30507b60ce1 100644 --- a/src/libs/actions/Report.js +++ b/src/libs/actions/Report.js @@ -193,6 +193,21 @@ function subscribeToNewActionEvent(reportID, callback) { }; } +/** + * Notify the ReportActionsView that a new comment has arrived + * + * @param {String} reportID + * @param {Number} accountID + * @param {String} reportActionID + */ +function notifyNewAction(reportID, accountID, reportActionID) { + if (reportID !== newActionSubscriber.reportID) { + return; + } + const isFromCurrentUser = accountID === currentUserAccountID; + newActionSubscriber.callback(isFromCurrentUser, reportActionID); +} + /** * Add up to two report actions to a report. This method can be called for the following situations: * @@ -306,12 +321,7 @@ function addActions(reportID, text = '', file) { successData, failureData, }); - - // Notify the ReportActionsView that a new comment has arrived - if (reportID === newActionSubscriber.reportID) { - const isFromCurrentUser = lastAction.actorAccountID === currentUserAccountID; - newActionSubscriber.callback(isFromCurrentUser, lastAction.reportActionID); - } + notifyNewAction(reportID, lastAction.actorAccountID, lastAction.reportActionID); } /** @@ -1436,12 +1446,7 @@ function showReportActionNotification(reportID, action) { Navigation.navigate(ROUTES.getReportRoute(reportID)); }, }); - - // Notify the ReportActionsView that a new comment has arrived - if (reportID === newActionSubscriber.reportID) { - const isFromCurrentUser = action.actorAccountID === currentUserAccountID; - newActionSubscriber.callback(isFromCurrentUser, action.reportActionID); - } + notifyNewAction(reportID, action.actorAccountID, action.reportActionID); } /** @@ -1830,6 +1835,7 @@ export { clearPolicyRoomNameErrors, clearIOUError, subscribeToNewActionEvent, + notifyNewAction, showReportActionNotification, addEmojiReaction, removeEmojiReaction, diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index d3fb665ecb48..e9229698d3d2 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -39,6 +39,7 @@ import TaskHeader from '../../components/TaskHeader'; import MoneyRequestHeader from '../../components/MoneyRequestHeader'; import withNavigation, {withNavigationPropTypes} from '../../components/withNavigation'; import * as ComposerActions from '../../libs/actions/Composer'; +import ReportScreenContext from './ReportScreenContext'; const propTypes = { /** Navigation route context info provided by react navigation */ @@ -134,6 +135,8 @@ class ReportScreen extends React.Component { isBannerVisible: true, }; this.firstRenderRef = React.createRef(); + this.flatListRef = React.createRef(); + this.reactionListRef = React.createRef(); } componentDidMount() { @@ -248,111 +251,118 @@ class ReportScreen extends React.Component { const policy = this.props.policies[`${ONYXKEYS.COLLECTION.POLICY}${this.props.report.policyID}`]; return ( - - - + + - {ReportUtils.isMoneyRequestReport(this.props.report) || isSingleTransactionView ? ( - - ) : ( - Navigation.goBack(ROUTES.HOME)} - personalDetails={this.props.personalDetails} - report={this.props.report} - /> - )} + + {ReportUtils.isMoneyRequestReport(this.props.report) || isSingleTransactionView ? ( + + ) : ( + Navigation.goBack(ROUTES.HOME)} + personalDetails={this.props.personalDetails} + report={this.props.report} + /> + )} - {ReportUtils.isTaskReport(this.props.report) && ( - - )} - - {Boolean(this.props.accountManagerReportID) && ReportUtils.isConciergeChatReport(this.props.report) && this.state.isBannerVisible && ( - - )} - { - const skeletonViewContainerHeight = event.nativeEvent.layout.height; - - // The height can be 0 if the component unmounts - we are not interested in this value and want to know how much space it - // takes up so we can set the skeleton view container height. - if (skeletonViewContainerHeight === 0) { - return; - } - reportActionsListViewHeight = skeletonViewContainerHeight; - this.setState({skeletonViewContainerHeight}); - }} - > - {this.isReportReadyForDisplay() && !isLoadingInitialReportActions && !isLoading && ( - + )} + + {Boolean(this.props.accountManagerReportID) && ReportUtils.isConciergeChatReport(this.props.report) && this.state.isBannerVisible && ( + )} - - {/* Note: The report should be allowed to mount even if the initial report actions are not loaded. If we prevent rendering the report while they are loading then - we'll unnecessarily unmount the ReportActionsView which will clear the new marker lines initial state. */} - {(!this.isReportReadyForDisplay() || isLoadingInitialReportActions || isLoading) && ( - - )} - - {this.isReportReadyForDisplay() && ( - <> - { + const skeletonViewContainerHeight = event.nativeEvent.layout.height; + + // The height can be 0 if the component unmounts - we are not interested in this value and want to know how much space it + // takes up so we can set the skeleton view container height. + if (skeletonViewContainerHeight === 0) { + return; + } + reportActionsListViewHeight = skeletonViewContainerHeight; + this.setState({skeletonViewContainerHeight}); + }} + > + {this.isReportReadyForDisplay() && !isLoadingInitialReportActions && !isLoading && ( + - - )} - - {!this.isReportReadyForDisplay() && ( - - )} - - - - - - + )} + + {/* Note: The report should be allowed to mount even if the initial report actions are not loaded. If we prevent rendering the report while they are loading then + we'll unnecessarily unmount the ReportActionsView which will clear the new marker lines initial state. */} + {(!this.isReportReadyForDisplay() || isLoadingInitialReportActions || isLoading) && ( + + )} + + {this.isReportReadyForDisplay() && ( + <> + + + )} + + {!this.isReportReadyForDisplay() && ( + + )} + + + + + + + ); } } diff --git a/src/pages/home/ReportScreenContext.js b/src/pages/home/ReportScreenContext.js new file mode 100644 index 000000000000..2f79d6ae9432 --- /dev/null +++ b/src/pages/home/ReportScreenContext.js @@ -0,0 +1,4 @@ +import {createContext} from 'react'; + +const ReportScreenContext = createContext(); +export default ReportScreenContext; diff --git a/src/pages/home/report/ReactionList/ReactionListRefContext.js b/src/pages/home/report/ReactionList/ReactionListRefContext.js deleted file mode 100644 index 12417b03bb15..000000000000 --- a/src/pages/home/report/ReactionList/ReactionListRefContext.js +++ /dev/null @@ -1,4 +0,0 @@ -import React from 'react'; - -const ReactionListRefContext = React.createContext(); -export default ReactionListRefContext; diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index 56b78a73ae50..7d4535abc2c8 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -11,7 +11,6 @@ import themeColors from '../../../styles/themes/default'; import * as StyleUtils from '../../../styles/StyleUtils'; import Composer from '../../../components/Composer'; import * as Report from '../../../libs/actions/Report'; -import * as ReportScrollManager from '../../../libs/ReportScrollManager'; import openReportActionComposeViewWhenClosingMessageEdit from '../../../libs/openReportActionComposeViewWhenClosingMessageEdit'; import ReportActionComposeFocusManager from '../../../libs/ReportActionComposeFocusManager'; import EmojiPickerButton from '../../../components/EmojiPicker/EmojiPickerButton'; @@ -33,6 +32,7 @@ import Hoverable from '../../../components/Hoverable'; import useLocalize from '../../../hooks/useLocalize'; import useKeyboardState from '../../../hooks/useKeyboardState'; import useWindowDimensions from '../../../hooks/useWindowDimensions'; +import useReportScrollManager from '../../../hooks/useReportScrollManager'; const propTypes = { /** All the data of the action */ @@ -75,6 +75,7 @@ const emojiButtonID = 'emojiButton'; const messageEditInput = 'messageEditInput'; function ReportActionItemMessageEdit(props) { + const reportScrollManager = useReportScrollManager(); const {translate} = useLocalize(); const {isKeyboardShown} = useKeyboardState(); const {isSmallScreenWidth} = useWindowDimensions(); @@ -186,11 +187,11 @@ function ReportActionItemMessageEdit(props) { // Scroll to the last comment after editing to make sure the whole comment is clearly visible in the report. if (props.index === 0) { const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => { - ReportScrollManager.scrollToIndex({animated: true, index: props.index}, false); + reportScrollManager.scrollToIndex({animated: true, index: props.index}, false); keyboardDidHideListener.remove(); }); } - }, [props.action.reportActionID, debouncedSaveDraft, props.index, props.reportID]); + }, [props.action.reportActionID, debouncedSaveDraft, props.index, props.reportID, reportScrollManager]); /** * Save the draft of the comment to be the new comment message. This will take the comment out of "edit mode" with @@ -306,7 +307,7 @@ function ReportActionItemMessageEdit(props) { style={[styles.textInputCompose, styles.flex1, styles.bgTransparent]} onFocus={() => { setIsFocused(true); - ReportScrollManager.scrollToIndex({animated: true, index: props.index}, true); + reportScrollManager.scrollToIndex({animated: true, index: props.index}, true); ComposerActions.setShouldShowComposeInput(false); }} onBlur={(event) => { diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js index c3288c3eeb6a..a6f517fd8043 100644 --- a/src/pages/home/report/ReportActionsList.js +++ b/src/pages/home/report/ReportActionsList.js @@ -1,10 +1,9 @@ import PropTypes from 'prop-types'; -import React, {useCallback, useEffect, useState} from 'react'; +import React, {useCallback, useEffect, useState, useContext} from 'react'; import Animated, {useSharedValue, useAnimatedStyle, withTiming} from 'react-native-reanimated'; import _ from 'underscore'; import InvertedFlatList from '../../../components/InvertedFlatList'; import compose from '../../../libs/compose'; -import * as ReportScrollManager from '../../../libs/ReportScrollManager'; import styles from '../../../styles/styles'; import * as ReportUtils from '../../../libs/ReportUtils'; import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions'; @@ -21,6 +20,7 @@ import CONST from '../../../CONST'; import reportPropTypes from '../../reportPropTypes'; import networkPropTypes from '../../../components/networkPropTypes'; import withLocalize from '../../../components/withLocalize'; +import ReportScreenContext from '../ReportScreenContext'; const propTypes = { /** Position of the "New" line marker */ @@ -78,6 +78,7 @@ function keyExtractor(item) { } function ReportActionsList(props) { + const {flatListRef} = useContext(ReportScreenContext); const opacity = useSharedValue(0); const animatedStyles = useAnimatedStyle(() => ({ opacity: opacity.value, @@ -152,7 +153,7 @@ function ReportActionsList(props) { - - - + @@ -368,5 +366,6 @@ class ReportActionsView extends React.Component { ReportActionsView.propTypes = propTypes; ReportActionsView.defaultProps = defaultProps; +ReportActionsView.contextType = ReportScreenContext; export default compose(Performance.withRenderTrace({id: ' rendering'}), withWindowDimensions, withNavigationFocus, withLocalize, withNetwork())(ReportActionsView); diff --git a/src/pages/iou/MoneyRequestModal.js b/src/pages/iou/MoneyRequestModal.js index 9c3f9b878b50..860ca6acd075 100644 --- a/src/pages/iou/MoneyRequestModal.js +++ b/src/pages/iou/MoneyRequestModal.js @@ -21,7 +21,6 @@ import * as PersonalDetails from '../../libs/actions/PersonalDetails'; import withCurrentUserPersonalDetails from '../../components/withCurrentUserPersonalDetails'; import reportPropTypes from '../reportPropTypes'; import * as ReportUtils from '../../libs/ReportUtils'; -import * as ReportScrollManager from '../../libs/ReportScrollManager'; import useOnNetworkReconnect from '../../hooks/useOnNetworkReconnect'; import * as DeviceCapabilities from '../../libs/DeviceCapabilities'; import HeaderWithBackButton from '../../components/HeaderWithBackButton'; @@ -395,14 +394,8 @@ function MoneyRequestModal(props) { > {modalHeader} { - createTransaction(selectedParticipants); - ReportScrollManager.scrollToBottom(); - }} - onSendMoney={(paymentMethodType) => { - sendMoney(paymentMethodType); - ReportScrollManager.scrollToBottom(); - }} + onConfirm={createTransaction} + onSendMoney={sendMoney} hasMultipleParticipants={props.hasMultipleParticipants} participants={_.filter(selectedOptions, (option) => props.currentUserPersonalDetails.accountID !== option.accountID)} iouAmount={amount} From 4c0a531250e1fe4c3484b7bce965ae69a57ae56c Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 22 Jun 2023 00:53:22 +0800 Subject: [PATCH 2/6] prettier --- src/libs/actions/Report.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js index a30507b60ce1..b49af54ad075 100644 --- a/src/libs/actions/Report.js +++ b/src/libs/actions/Report.js @@ -195,10 +195,10 @@ function subscribeToNewActionEvent(reportID, callback) { /** * Notify the ReportActionsView that a new comment has arrived - * - * @param {String} reportID - * @param {Number} accountID - * @param {String} reportActionID + * + * @param {String} reportID + * @param {Number} accountID + * @param {String} reportActionID */ function notifyNewAction(reportID, accountID, reportActionID) { if (reportID !== newActionSubscriber.reportID) { From fe19af28a368acad9c110baaa5339e5800b98c8f Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Fri, 23 Jun 2023 18:33:20 +0800 Subject: [PATCH 3/6] add null check --- src/libs/ReportScrollManager/index.js | 4 ++++ src/libs/ReportScrollManager/index.native.js | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/src/libs/ReportScrollManager/index.js b/src/libs/ReportScrollManager/index.js index dd3ca0aa9532..6a65e82372f8 100644 --- a/src/libs/ReportScrollManager/index.js +++ b/src/libs/ReportScrollManager/index.js @@ -7,6 +7,10 @@ * @param {Boolean} isEditing */ function scrollToIndex(ref, index, isEditing) { + if (!ref.current) { + return; + } + if (isEditing) { return; } diff --git a/src/libs/ReportScrollManager/index.native.js b/src/libs/ReportScrollManager/index.native.js index d3eaa422cbc5..570d3a72acac 100644 --- a/src/libs/ReportScrollManager/index.native.js +++ b/src/libs/ReportScrollManager/index.native.js @@ -5,6 +5,10 @@ * @param {Object} index */ function scrollToIndex(ref, index) { + if (!ref.current) { + return; + } + ref.current.scrollToIndex(index); } From c6fa8b6cbe55f6f7b1fbc51859b559d12dab52c1 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Fri, 23 Jun 2023 18:33:51 +0800 Subject: [PATCH 4/6] export the ref --- src/hooks/useReportScrollManager/index.js | 2 +- src/pages/home/report/ReportActionsList.js | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/hooks/useReportScrollManager/index.js b/src/hooks/useReportScrollManager/index.js index 419599cb7d54..6956fdfe2bfd 100644 --- a/src/hooks/useReportScrollManager/index.js +++ b/src/hooks/useReportScrollManager/index.js @@ -26,7 +26,7 @@ function useReportScrollManager() { flatListRef.current.scrollToOffset({animated: false, offset: 0}); }; - return {scrollToIndex, scrollToBottom}; + return {ref: flatListRef, scrollToIndex, scrollToBottom}; } export default useReportScrollManager; diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js index a6f517fd8043..8e48f06c3528 100644 --- a/src/pages/home/report/ReportActionsList.js +++ b/src/pages/home/report/ReportActionsList.js @@ -1,5 +1,5 @@ import PropTypes from 'prop-types'; -import React, {useCallback, useEffect, useState, useContext} from 'react'; +import React, {useCallback, useEffect, useState} from 'react'; import Animated, {useSharedValue, useAnimatedStyle, withTiming} from 'react-native-reanimated'; import _ from 'underscore'; import InvertedFlatList from '../../../components/InvertedFlatList'; @@ -20,7 +20,7 @@ import CONST from '../../../CONST'; import reportPropTypes from '../../reportPropTypes'; import networkPropTypes from '../../../components/networkPropTypes'; import withLocalize from '../../../components/withLocalize'; -import ReportScreenContext from '../ReportScreenContext'; +import useReportScrollManager from '../../../hooks/useReportScrollManager'; const propTypes = { /** Position of the "New" line marker */ @@ -78,7 +78,7 @@ function keyExtractor(item) { } function ReportActionsList(props) { - const {flatListRef} = useContext(ReportScreenContext); + const reportScrollManager = useReportScrollManager(); const opacity = useSharedValue(0); const animatedStyles = useAnimatedStyle(() => ({ opacity: opacity.value, @@ -153,7 +153,7 @@ function ReportActionsList(props) { Date: Fri, 23 Jun 2023 20:45:45 +0800 Subject: [PATCH 5/6] add more null checks --- src/hooks/useReportScrollManager/index.js | 6 +++++- src/hooks/useReportScrollManager/index.native.js | 8 ++++++++ src/libs/ReportScrollManager/index.js | 6 +----- 3 files changed, 14 insertions(+), 6 deletions(-) diff --git a/src/hooks/useReportScrollManager/index.js b/src/hooks/useReportScrollManager/index.js index 6956fdfe2bfd..13e7471f6eb1 100644 --- a/src/hooks/useReportScrollManager/index.js +++ b/src/hooks/useReportScrollManager/index.js @@ -12,7 +12,7 @@ function useReportScrollManager() { * @param {Boolean} isEditing */ const scrollToIndex = (index, isEditing) => { - if (isEditing) { + if (!flatListRef.current || isEditing) { return; } @@ -23,6 +23,10 @@ function useReportScrollManager() { * Scroll to the bottom of the flatlist. */ const scrollToBottom = () => { + if (!flatListRef.current) { + return; + } + flatListRef.current.scrollToOffset({animated: false, offset: 0}); }; diff --git a/src/hooks/useReportScrollManager/index.native.js b/src/hooks/useReportScrollManager/index.native.js index 2206cd5104d4..91930a4e6cea 100644 --- a/src/hooks/useReportScrollManager/index.native.js +++ b/src/hooks/useReportScrollManager/index.native.js @@ -10,6 +10,10 @@ function useReportScrollManager() { * @param {Object} index */ const scrollToIndex = (index) => { + if (!flatListRef.current) { + return; + } + flatListRef.current.scrollToIndex(index); }; @@ -17,6 +21,10 @@ function useReportScrollManager() { * Scroll to the bottom of the flatlist. */ const scrollToBottom = () => { + if (!flatListRef.current) { + return; + } + flatListRef.current.scrollToOffset({animated: false, offset: 0}); }; diff --git a/src/libs/ReportScrollManager/index.js b/src/libs/ReportScrollManager/index.js index 6a65e82372f8..1dd9922b33b8 100644 --- a/src/libs/ReportScrollManager/index.js +++ b/src/libs/ReportScrollManager/index.js @@ -7,11 +7,7 @@ * @param {Boolean} isEditing */ function scrollToIndex(ref, index, isEditing) { - if (!ref.current) { - return; - } - - if (isEditing) { + if (!ref.current || isEditing) { return; } From 90dee1527fe55d74d33db336b1d84ccef60b7477 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Sat, 24 Jun 2023 12:16:39 +0800 Subject: [PATCH 6/6] export ref --- src/hooks/useReportScrollManager/index.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/useReportScrollManager/index.native.js b/src/hooks/useReportScrollManager/index.native.js index 91930a4e6cea..e206991efa03 100644 --- a/src/hooks/useReportScrollManager/index.native.js +++ b/src/hooks/useReportScrollManager/index.native.js @@ -28,7 +28,7 @@ function useReportScrollManager() { flatListRef.current.scrollToOffset({animated: false, offset: 0}); }; - return {scrollToIndex, scrollToBottom}; + return {ref: flatListRef, scrollToIndex, scrollToBottom}; } export default useReportScrollManager;