diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index 5e41e33b18a4..781d7fe1182a 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -1,5 +1,6 @@ import React, {useRef, useState, useEffect, useMemo, useCallback} from 'react'; import {withOnyx} from 'react-native-onyx'; +import {useFocusEffect} from '@react-navigation/native'; import PropTypes from 'prop-types'; import {View} from 'react-native'; import lodashGet from 'lodash/get'; @@ -259,26 +260,28 @@ function ReportScreen({ [route], ); - useEffect(() => { - const unsubscribeVisibilityListener = Visibility.onVisibilityChange(() => { - const isTopMostReportID = Navigation.getTopmostReportId() === getReportID(route); - // If the report is not fully visible (AKA on small screen devices and LHR is open) or the report is optimistic (AKA not yet created) - // we don't need to call openReport - if (!getIsReportFullyVisible(isTopMostReportID) || report.isOptimisticReport) { - return; - } - - Report.openReport(report.reportID); - }); + useFocusEffect( + useCallback(() => { + const unsubscribeVisibilityListener = Visibility.onVisibilityChange(() => { + const isTopMostReportID = Navigation.getTopmostReportId() === getReportID(route); + // If the report is not fully visible (AKA on small screen devices and LHR is open) or the report is optimistic (AKA not yet created) + // we don't need to call openReport + if (!getIsReportFullyVisible(isTopMostReportID) || report.isOptimisticReport) { + return; + } + + Report.openReport(report.reportID); + }); + + return () => unsubscribeVisibilityListener(); + // The effect should run only on the first focus to attach listener + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []), + ); + useEffect(() => { fetchReportIfNeeded(); ComposerActions.setShouldShowComposeInput(true); - return () => { - if (!unsubscribeVisibilityListener) { - return; - } - unsubscribeVisibilityListener(); - }; // I'm disabling the warning, as it expects to use exhaustive deps, even though we want this useEffect to run only on the first render. // eslint-disable-next-line react-hooks/exhaustive-deps }, []);