From fd10e5b933086106b44aed2234249adfe0b5d9f6 Mon Sep 17 00:00:00 2001 From: QichenZhu <57348009+QichenZhu@users.noreply.github.com> Date: Tue, 3 Sep 2024 17:51:49 +1200 Subject: [PATCH 1/6] Prevent Lottie from running in the background after navigating to other pages --- src/components/Lottie/index.tsx | 35 +++++++++++++++++++++++++++++++-- 1 file changed, 33 insertions(+), 2 deletions(-) diff --git a/src/components/Lottie/index.tsx b/src/components/Lottie/index.tsx index dd46b33a8400..b1acaa313c19 100644 --- a/src/components/Lottie/index.tsx +++ b/src/components/Lottie/index.tsx @@ -1,13 +1,15 @@ +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, useEffect, useState} from 'react'; +import React, {forwardRef, useContext, useEffect, useState} from 'react'; import {View} from 'react-native'; import type DotLottieAnimation from '@components/LottieAnimations/types'; 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,9 @@ function Lottie({source, webStyle, ...props}: Props, ref: ForwardedRef setIsError(false)}); @@ -27,13 +32,39 @@ function Lottie({source, webStyle, ...props}: Props, ref: ForwardedRef { + if (!navigationContainerRef || !navigator) { + return; + } + const unsubscribeNavigationFocus = navigator.addListener('focus', () => { + setIsHidden(false); + }); + return unsubscribeNavigationFocus; + }, [navigationContainerRef, navigator]); + + // Prevent the animation from running in the background after navigating to other pages. + // See https://github.com/Expensify/App/issues/47273 + useEffect(() => { + if (!navigationContainerRef || !navigator) { + return; + } + const unsubscribeNavigationBlur = navigator.addListener('blur', () => { + const state = navigationContainerRef.getRootState(); + const targetRouteName = state?.routes?.[state?.index ?? 0]?.name; + if (targetRouteName !== NAVIGATORS.RIGHT_MODAL_NAVIGATOR) { + setIsHidden(true); + } + }); + return unsubscribeNavigationBlur; + }, [navigationContainerRef, navigator]); + 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 ; } From fc9fa94fbe3fff856f4c6e0323a6856310ee185b Mon Sep 17 00:00:00 2001 From: QichenZhu <57348009+QichenZhu@users.noreply.github.com> Date: Mon, 9 Sep 2024 15:44:54 +1200 Subject: [PATCH 2/6] Rename isHidden to hasNavigatedAway --- src/components/Lottie/index.tsx | 27 +++++++++++++-------------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/src/components/Lottie/index.tsx b/src/components/Lottie/index.tsx index b2d7e08216ea..6fe937c9606e 100644 --- a/src/components/Lottie/index.tsx +++ b/src/components/Lottie/index.tsx @@ -21,9 +21,6 @@ function Lottie({source, webStyle, ...props}: Props, ref: ForwardedRef setIsError(false)}); @@ -33,39 +30,41 @@ function Lottie({source, webStyle, ...props}: Props, ref: ForwardedRef { - if (!navigationContainerRef || !navigator) { + if (!navigationContainerRef?.isReady?.() || !navigator) { return; } const unsubscribeNavigationFocus = navigator.addListener('focus', () => { - setIsHidden(false); + setHasNavigatedAway(false); }); return unsubscribeNavigationFocus; }, [navigationContainerRef, navigator]); - // Prevent the animation from running in the background after navigating to other pages. - // See https://github.com/Expensify/App/issues/47273 useEffect(() => { - if (!navigationContainerRef || !navigator) { + if (!navigationContainerRef?.isReady?.() || !navigator) { return; } const unsubscribeNavigationBlur = navigator.addListener('blur', () => { const state = navigationContainerRef.getRootState(); const targetRouteName = state?.routes?.[state?.index ?? 0]?.name; if (targetRouteName !== NAVIGATORS.RIGHT_MODAL_NAVIGATOR) { - setIsHidden(true); + setHasNavigatedAway(true); } }); return unsubscribeNavigationBlur; }, [navigationContainerRef, navigator]); - 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, + // 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 issue: https://github.com/Expensify/App/issues/34696 - if (isError || isHidden || appState.isBackground || !animationFile || splashScreenState !== CONST.BOOT_SPLASH_STATE.HIDDEN) { + // 2. heavy rendering, see issues: https://github.com/Expensify/App/issues/34696 and https://github.com/Expensify/App/issues/47273 + if (hasNavigatedAway || isError || appState.isBackground || !animationFile || splashScreenState !== CONST.BOOT_SPLASH_STATE.HIDDEN) { return ; } From b79df7428eb4570d26488fd6976c5270e7e2cda5 Mon Sep 17 00:00:00 2001 From: QichenZhu <57348009+QichenZhu@users.noreply.github.com> Date: Mon, 9 Sep 2024 17:27:15 +1200 Subject: [PATCH 3/6] Check the platform --- src/components/Lottie/index.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/Lottie/index.tsx b/src/components/Lottie/index.tsx index 6fe937c9606e..015b1baf623c 100644 --- a/src/components/Lottie/index.tsx +++ b/src/components/Lottie/index.tsx @@ -5,6 +5,7 @@ import type {ForwardedRef} from 'react'; import React, {forwardRef, useContext, useEffect, useState} from 'react'; import {View} from 'react-native'; import type DotLottieAnimation from '@components/LottieAnimations/types'; +import * as Browser from '@libs/Browser'; import useAppState from '@hooks/useAppState'; import useNetwork from '@hooks/useNetwork'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -32,12 +33,13 @@ function Lottie({source, webStyle, ...props}: Props, ref: ForwardedRef { - if (!navigationContainerRef?.isReady?.() || !navigator) { + if (!browser || !navigationContainerRef || !navigator) { return; } const unsubscribeNavigationFocus = navigator.addListener('focus', () => { @@ -47,7 +49,7 @@ function Lottie({source, webStyle, ...props}: Props, ref: ForwardedRef { - if (!navigationContainerRef?.isReady?.() || !navigator) { + if (!browser || !navigationContainerRef || !navigator) { return; } const unsubscribeNavigationBlur = navigator.addListener('blur', () => { From 3bc4b18b49d473c033b2bfeeadf4cd25f7c62732 Mon Sep 17 00:00:00 2001 From: QichenZhu <57348009+QichenZhu@users.noreply.github.com> Date: Mon, 9 Sep 2024 19:06:46 +1200 Subject: [PATCH 4/6] Fix lint errors --- src/components/Lottie/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Lottie/index.tsx b/src/components/Lottie/index.tsx index 015b1baf623c..4879e80df146 100644 --- a/src/components/Lottie/index.tsx +++ b/src/components/Lottie/index.tsx @@ -5,10 +5,10 @@ import type {ForwardedRef} from 'react'; import React, {forwardRef, useContext, useEffect, useState} from 'react'; import {View} from 'react-native'; import type DotLottieAnimation from '@components/LottieAnimations/types'; -import * as Browser from '@libs/Browser'; import useAppState from '@hooks/useAppState'; import useNetwork from '@hooks/useNetwork'; import useThemeStyles from '@hooks/useThemeStyles'; +import * as Browser from '@libs/Browser'; import CONST from '@src/CONST'; import NAVIGATORS from '@src/NAVIGATORS'; import {useSplashScreenStateContext} from '@src/SplashScreenStateContext'; From 7f5a158a92c9502be72f718a21c3566c27f89a68 Mon Sep 17 00:00:00 2001 From: QichenZhu <57348009+QichenZhu@users.noreply.github.com> Date: Mon, 9 Sep 2024 19:18:50 +1200 Subject: [PATCH 5/6] Add useEffect dependencies --- src/components/Lottie/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Lottie/index.tsx b/src/components/Lottie/index.tsx index 4879e80df146..25e9ed77b2f3 100644 --- a/src/components/Lottie/index.tsx +++ b/src/components/Lottie/index.tsx @@ -46,7 +46,7 @@ function Lottie({source, webStyle, ...props}: Props, ref: ForwardedRef { if (!browser || !navigationContainerRef || !navigator) { @@ -60,7 +60,7 @@ function Lottie({source, webStyle, ...props}: Props, ref: ForwardedRef