fix: Book travel - Book travel animation becomes blank while RHP is dismissed

Author: layacat

src/components/Lottie/index.tsx

@@ -1,8 +1,7 @@
 import {NavigationContainerRefContext, NavigationContext} from '@react-navigation/native';
 import type {AnimationObject, LottieViewProps} from 'lottie-react-native';
 import LottieView from 'lottie-react-native';
-import type {ForwardedRef} from 'react';
-import React, {forwardRef, useContext, useEffect, useState} from 'react';
+import React, {forwardRef, useContext, useEffect, useRef, useState} from 'react';
 import {InteractionManager, View} from 'react-native';
 import type DotLottieAnimation from '@components/LottieAnimations/types';
 import useAppState from '@hooks/useAppState';
@@ -18,7 +17,8 @@ type Props = {
     shouldLoadAfterInteractions?: boolean;
 } & Omit<LottieViewProps, 'source'>;
 
-function Lottie({source, webStyle, shouldLoadAfterInteractions, ...props}: Props, ref: ForwardedRef<LottieView>) {
+function Lottie({source, webStyle, shouldLoadAfterInteractions, ...props}: Props) {
+    const animationRef = useRef<LottieView>(null);
     const appState = useAppState();
     const {splashScreenState} = useSplashScreenStateContext();
     const styles = useThemeStyles();
@@ -79,19 +79,20 @@ function Lottie({source, webStyle, shouldLoadAfterInteractions, ...props}: Props
         return unsubscribeNavigationBlur;
     }, [browser, navigationContainerRef, navigator]);
 
+    // If user is being navigated away, let pause the animation to prevent memory leak.
+    useEffect(() => {
+        if (!animationRef.current || !hasNavigatedAway) {
+            return;
+        }
+        animationRef?.current?.pause();
+    }, [hasNavigatedAway]);
+
     // If the page navigates to another screen, 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 issues: https://github.com/Expensify/App/issues/34696 and https://github.com/Expensify/App/issues/47273
     // 3. lag on react navigation transitions, see issue: https://github.com/Expensify/App/issues/44812
-    if (
-        hasNavigatedAway ||
-        isError ||
-        appState.isBackground ||
-        !animationFile ||
-        splashScreenState !== CONST.BOOT_SPLASH_STATE.HIDDEN ||
-        (!isInteractionComplete && shouldLoadAfterInteractions)
-    ) {
+    if (isError || appState.isBackground || !animationFile || splashScreenState !== CONST.BOOT_SPLASH_STATE.HIDDEN || (!isInteractionComplete && shouldLoadAfterInteractions)) {
         return <View style={[aspectRatioStyle, props.style]} />;
     }
 
@@ -100,7 +101,7 @@ function Lottie({source, webStyle, shouldLoadAfterInteractions, ...props}: Props
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
             source={animationFile}
-            ref={ref}
+            ref={animationRef}
             style={[aspectRatioStyle, props.style]}
             webStyle={{...aspectRatioStyle, ...webStyle}}
             onAnimationFailure={() => setIsError(true)}