Merge pull request #38093 from ikevin127/fix/36645

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

src/components/Lottie/index.tsx

@@ -4,6 +4,7 @@ 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';
 
@@ -12,15 +13,18 @@ type Props = {
 } & Omit<LottieViewProps, 'source'>;
 
 function Lottie({source, webStyle, ...props}: Props, ref: ForwardedRef<LottieView>) {
+    const appState = useAppState();
     const styles = useThemeStyles();
     const [isError, setIsError] = React.useState(false);
 
     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 appState.isBackground to prevent
+    // memory leak, see issue: https://github.com/Expensify/App/issues/36645
+    if (isError || appState.isBackground) {
         return <View style={aspectRatioStyle} />;
     }
 

src/hooks/useAppState/index.native.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import type {AppStateStatus} from 'react-native';
+import {AppState} from 'react-native';
+import type AppStateType from './types';
+
+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,8 @@
+import type AppStateType from './types';
+
+function useAppState(): AppStateType {
+    // Since there's no AppState in web, we'll always return isForeground as true
+    return {isForeground: true, isInactive: false, isBackground: false};
+}
+
+export default useAppState;

src/hooks/useAppState/types.ts

@@ -0,0 +1,7 @@
+type AppStateType = {
+    isForeground: boolean;
+    isInactive: boolean;
+    isBackground: boolean;
+};
+
+export default AppStateType;