FIX: Performance and heat issues on the 'Troubleshoot' page

src/components/Lottie/index.tsx

@@ -1,9 +1,11 @@
+import {useIsFocused} from '@react-navigation/native';
 import type {LottieViewProps} from 'lottie-react-native';
 import LottieView from 'lottie-react-native';
 import type {ForwardedRef} from 'react';
 import React, {forwardRef} 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 useThemeStyles from '@hooks/useThemeStyles';
 
@@ -15,12 +17,17 @@ function Lottie({source, webStyle, ...props}: Props, ref: ForwardedRef<LottieVie
     const styles = useThemeStyles();
     const [isError, setIsError] = React.useState(false);
 
+    const appState = useAppState();
+    const isFocused = useIsFocused();
+
     useNetwork({onReconnect: () => setIsError(false)});
 
     const aspectRatioStyle = styles.aspectRatioLottie(source);
 
-    // If the image fails to load, we'll just render an empty view
-    if (isError) {
+    // If the image fails to load or app is in background state, we'll just render an empty view
+    // using the fallback in case of a Lottie error or (isFocused || isBackground) to prevent
+    // memory leaks, see issue: https://github.com/Expensify/App/issues/36645
+    if (isError || !isFocused || appState.isBackground) {
         return <View style={aspectRatioStyle} />;
     }
 

src/hooks/useAppState/index.native.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import type {AppStateStatus} from 'react-native';
+import {AppState} from 'react-native';
+
+type AppStateType = {
+    isForeground: boolean;
+    isInactive: boolean;
+    isBackground: boolean;
+};
+
+function useAppState() {
+    const [appState, setAppState] = React.useState<AppStateType>({
+        isForeground: AppState.currentState === 'active',
+        isInactive: AppState.currentState === 'inactive',
+        isBackground: AppState.currentState === 'background',
+    });
+
+    React.useEffect(() => {
+        function handleAppStateChange(nextAppState: AppStateStatus) {
+            setAppState({
+                isForeground: nextAppState === 'active',
+                isInactive: nextAppState === 'inactive',
+                isBackground: nextAppState === 'background',
+            });
+        }
+        const subscription = AppState.addEventListener('change', handleAppStateChange);
+        return () => subscription.remove();
+    }, []);
+
+    return appState;
+}
+
+export default useAppState;

src/hooks/useAppState/index.ts

@@ -0,0 +1,4 @@
+export default function useAppState() {
+    // Since there's no AppState in web, we'll always return isForeground as true
+    return {isForeground: true, isInactive: false, isBackground: false};
+}