From 8b74651323bfbe0f16a990a717aaf491f353a08c Mon Sep 17 00:00:00 2001 From: QichenZhu <57348009+QichenZhu@users.noreply.github.com> Date: Sat, 24 Aug 2024 23:05:51 +1200 Subject: [PATCH 1/4] Prevent Lottie from running in the background after navigating to other pages --- src/components/Lottie/index.tsx | 26 +++++++++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/src/components/Lottie/index.tsx b/src/components/Lottie/index.tsx index dd46b33a8400..c18e4cf5d6b6 100644 --- a/src/components/Lottie/index.tsx +++ b/src/components/Lottie/index.tsx @@ -5,9 +5,11 @@ import React, {forwardRef, useEffect, useState} from 'react'; import {View} from 'react-native'; import type DotLottieAnimation from '@components/LottieAnimations/types'; import useAppState from '@hooks/useAppState'; +import {useNavigation} from '@react-navigation/native' 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 setIsError(false)}); @@ -27,13 +31,33 @@ function Lottie({source, webStyle, ...props}: Props, ref: ForwardedRef { + const unsubscribe = navigation.addListener('focus', () => { + setIsHidden(false); + }); + return unsubscribe; + }, [navigation]); + + // Prevent the animation from running in the background after navigating to other pages. + // See https://github.com/Expensify/App/issues/47273 + useEffect(() => { + const unsubscribe = navigation.addListener('blur', () => { + const state = navigation.getState(); + const targetRouteName = state?.routes?.[state?.index ?? 0]?.name; + if (targetRouteName !== NAVIGATORS.RIGHT_MODAL_NAVIGATOR) { + setIsHidden(true); + } + }); + return unsubscribe; + }, [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 ; } From 7c52b624c29f6fba410f7ad25fb54aa93e4fce10 Mon Sep 17 00:00:00 2001 From: QichenZhu <57348009+QichenZhu@users.noreply.github.com> Date: Sat, 24 Aug 2024 23:19:28 +1200 Subject: [PATCH 2/4] 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 c18e4cf5d6b6..38330172cc0e 100644 --- a/src/components/Lottie/index.tsx +++ b/src/components/Lottie/index.tsx @@ -5,7 +5,7 @@ import React, {forwardRef, useEffect, useState} from 'react'; import {View} from 'react-native'; import type DotLottieAnimation from '@components/LottieAnimations/types'; import useAppState from '@hooks/useAppState'; -import {useNavigation} from '@react-navigation/native' +import {useNavigation} from '@react-navigation/native'; import useNetwork from '@hooks/useNetwork'; import useSplashScreen from '@hooks/useSplashScreen'; import useThemeStyles from '@hooks/useThemeStyles'; From d8fb8c5bb37ff3cdf2397fc468b396dc2fb914a1 Mon Sep 17 00:00:00 2001 From: QichenZhu <57348009+QichenZhu@users.noreply.github.com> Date: Sat, 24 Aug 2024 23:44:51 +1200 Subject: [PATCH 3/4] Fix lint errors --- 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 38330172cc0e..57d30a16fc0f 100644 --- a/src/components/Lottie/index.tsx +++ b/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'; @@ -5,7 +6,6 @@ import React, {forwardRef, useEffect, useState} from 'react'; import {View} from 'react-native'; import type DotLottieAnimation from '@components/LottieAnimations/types'; import useAppState from '@hooks/useAppState'; -import {useNavigation} from '@react-navigation/native'; import useNetwork from '@hooks/useNetwork'; import useSplashScreen from '@hooks/useSplashScreen'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -50,7 +50,7 @@ function Lottie({source, webStyle, ...props}: Props, ref: ForwardedRef