Merge pull request #47960 from QichenZhu/fix/47273

Prevent Lottie from running in the background after navigating to other pages

src/components/Lottie/index.tsx

@@ -1,3 +1,4 @@
+import {useNavigation} from '@react-navigation/native';
 import type {AnimationObject, LottieViewProps} from 'lottie-react-native';
 import LottieView from 'lottie-react-native';
 import type {ForwardedRef} from 'react';
@@ -8,6 +9,7 @@ import useAppState from '@hooks/useAppState';
 import useNetwork from '@hooks/useNetwork';
 import useSplashScreen from '@hooks/useSplashScreen';
 import useThemeStyles from '@hooks/useThemeStyles';
+import NAVIGATORS from '@src/NAVIGATORS';
 
 type Props = {
     source: DotLottieAnimation;
@@ -18,6 +20,8 @@ function Lottie({source, webStyle, ...props}: Props, ref: ForwardedRef<LottieVie
     const {isSplashHidden} = useSplashScreen();
     const styles = useThemeStyles();
     const [isError, setIsError] = React.useState(false);
+    const [isHidden, setIsHidden] = React.useState(false);
+    const navigation = useNavigation();
 
     useNetwork({onReconnect: () => setIsError(false)});
 
@@ -27,13 +31,33 @@ function Lottie({source, webStyle, ...props}: Props, ref: ForwardedRef<LottieVie
         setAnimationFile(source.file);
     }, [setAnimationFile, source.file]);
 
+    useEffect(() => {
+        const unsubscribeNavigationFocus = navigation.addListener('focus', () => {
+            setIsHidden(false);
+        });
+        return unsubscribeNavigationFocus;
+    }, [navigation]);
+
+    // Prevent the animation from running in the background after navigating to other pages.
+    // See https://github.com/Expensify/App/issues/47273
+    useEffect(() => {
+        const unsubscribeNavigationBlur = navigation.addListener('blur', () => {
+            const state = navigation.getState();
+            const targetRouteName = state?.routes?.[state?.index ?? 0]?.name;
+            if (targetRouteName !== NAVIGATORS.RIGHT_MODAL_NAVIGATOR) {
+                setIsHidden(true);
+            }
+        });
+        return unsubscribeNavigationBlur;
+    }, [navigation]);
+
     const aspectRatioStyle = styles.aspectRatioLottie(source);
 
     // If the image fails to load, app is in background state, animation file isn't ready, or the splash screen isn't hidden yet,
     // we'll just render an empty view as the fallback to prevent
     // 1. memory leak, see issue: https://github.com/Expensify/App/issues/36645
     // 2. heavy rendering, see issue: https://github.com/Expensify/App/issues/34696
-    if (isError || appState.isBackground || !animationFile || !isSplashHidden) {
+    if (isError || isHidden || appState.isBackground || !animationFile || !isSplashHidden) {
         return <View style={[aspectRatioStyle, props.style]} />;
     }