diff --git a/src/components/Lottie/index.tsx b/src/components/Lottie/index.tsx
index 5c672cf7cab6..08e7613dc7a9 100644
--- a/src/components/Lottie/index.tsx
+++ b/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,6 +13,7 @@ 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);
 
@@ -19,8 +21,10 @@ function Lottie({source, webStyle, ...props}: Props, ref: ForwardedRef<LottieVie
 
     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} />;
     }
 
diff --git a/src/hooks/useAppState/index.native.ts b/src/hooks/useAppState/index.native.ts
new file mode 100644
index 000000000000..39c1dff65e7c
--- /dev/null
+++ b/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;
diff --git a/src/hooks/useAppState/index.ts b/src/hooks/useAppState/index.ts
new file mode 100644
index 000000000000..74d68535d1d1
--- /dev/null
+++ b/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;
diff --git a/src/hooks/useAppState/types.ts b/src/hooks/useAppState/types.ts
new file mode 100644
index 000000000000..9093b89fc4dc
--- /dev/null
+++ b/src/hooks/useAppState/types.ts
@@ -0,0 +1,7 @@
+type AppStateType = {
+    isForeground: boolean;
+    isInactive: boolean;
+    isBackground: boolean;
+};
+
+export default AppStateType;