Merge pull request Expensify#27642 from staszekscp/remove-visibilityL…

…isteners-fix Remove visibilityListeners when report gets unfocused
dukenv0307 · Sep 19, 2023 · 3bffd67 · 3bffd67
2 parents 1c41575 + 55e9907
commit 3bffd67
Showing 1 changed file with 20 additions and 17 deletions.
diff --git 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
     }, []);