From 1f954151422b1a99643cd9677613b0184e53acf1 Mon Sep 17 00:00:00 2001
From: dominictb <tb-dominic@outlook.com>
Date: Wed, 11 Sep 2024 22:35:59 +0700
Subject: [PATCH 1/2] fix: lottie and svg not render after switching from Inbox
 to Settings

---
 .../index.native.tsx}                         |  2 +-
 src/libs/Navigation/FreezeWrapper/index.tsx   | 46 +++++++++++++++++++
 2 files changed, 47 insertions(+), 1 deletion(-)
 rename src/libs/Navigation/{FreezeWrapper.tsx => FreezeWrapper/index.native.tsx} (96%)
 create mode 100644 src/libs/Navigation/FreezeWrapper/index.tsx

diff --git a/src/libs/Navigation/FreezeWrapper.tsx b/src/libs/Navigation/FreezeWrapper/index.native.tsx
similarity index 96%
rename from src/libs/Navigation/FreezeWrapper.tsx
rename to src/libs/Navigation/FreezeWrapper/index.native.tsx
index fb5f769b19c1..670544a0926d 100644
--- a/src/libs/Navigation/FreezeWrapper.tsx
+++ b/src/libs/Navigation/FreezeWrapper/index.native.tsx
@@ -2,7 +2,7 @@ import {useIsFocused, useNavigation, useRoute} from '@react-navigation/native';
 import React, {useEffect, useRef, useState} from 'react';
 import {Freeze} from 'react-freeze';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
-import shouldSetScreenBlurred from './shouldSetScreenBlurred';
+import shouldSetScreenBlurred from '../shouldSetScreenBlurred';
 
 type FreezeWrapperProps = ChildrenProps & {
     /** Prop to disable freeze */
diff --git a/src/libs/Navigation/FreezeWrapper/index.tsx b/src/libs/Navigation/FreezeWrapper/index.tsx
new file mode 100644
index 000000000000..4c4d54e610b9
--- /dev/null
+++ b/src/libs/Navigation/FreezeWrapper/index.tsx
@@ -0,0 +1,46 @@
+import {useIsFocused, useNavigation, useRoute} from '@react-navigation/native';
+import React, {useEffect, useLayoutEffect, useRef, useState} from 'react';
+import {Freeze} from 'react-freeze';
+import type ChildrenProps from '@src/types/utils/ChildrenProps';
+import shouldSetScreenBlurred from '../shouldSetScreenBlurred';
+
+type FreezeWrapperProps = ChildrenProps & {
+    /** Prop to disable freeze */
+    keepVisible?: boolean;
+};
+
+function FreezeWrapper({keepVisible = false, children}: FreezeWrapperProps) {
+    const [isScreenBlurred, setIsScreenBlurred] = useState(false);
+    const [freezed, setFreezed] = useState(false);
+    // we need to know the screen index to determine if the screen can be frozen
+    const screenIndexRef = useRef<number | null>(null);
+    const isFocused = useIsFocused();
+    const navigation = useNavigation();
+    const currentRoute = useRoute();
+
+    useEffect(() => {
+        const index = navigation.getState()?.routes.findIndex((route) => route.key === currentRoute.key) ?? 0;
+        screenIndexRef.current = index;
+        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
+    }, []);
+
+    useEffect(() => {
+        const unsubscribe = navigation.addListener('state', () => {
+            const navigationIndex = (navigation.getState()?.index ?? 0) - (screenIndexRef.current ?? 0);
+            setIsScreenBlurred(shouldSetScreenBlurred(navigationIndex));
+        });
+        return () => unsubscribe();
+    }, [isFocused, isScreenBlurred, navigation]);
+
+    // Decouple the Suspense render task so it won't be interuptted by React's concurrent mode
+    // and stuck in an infinite loop
+    useLayoutEffect(() => {
+        setFreezed(!isFocused && isScreenBlurred && !keepVisible);
+    }, [isFocused, isScreenBlurred, keepVisible]);
+
+    return <Freeze freeze={freezed}>{children}</Freeze>;
+}
+
+FreezeWrapper.displayName = 'FreezeWrapper';
+
+export default FreezeWrapper;

From 5067317b72d633b90c2624d6c9ef95bf80374894 Mon Sep 17 00:00:00 2001
From: dominictb <tb-dominic@outlook.com>
Date: Wed, 11 Sep 2024 23:00:05 +0700
Subject: [PATCH 2/2] fix lint

---
 src/libs/Navigation/FreezeWrapper/index.native.tsx | 2 +-
 src/libs/Navigation/FreezeWrapper/index.tsx        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/libs/Navigation/FreezeWrapper/index.native.tsx b/src/libs/Navigation/FreezeWrapper/index.native.tsx
index 670544a0926d..b071a065bd31 100644
--- a/src/libs/Navigation/FreezeWrapper/index.native.tsx
+++ b/src/libs/Navigation/FreezeWrapper/index.native.tsx
@@ -1,8 +1,8 @@
 import {useIsFocused, useNavigation, useRoute} from '@react-navigation/native';
 import React, {useEffect, useRef, useState} from 'react';
 import {Freeze} from 'react-freeze';
+import shouldSetScreenBlurred from '@libs/Navigation/shouldSetScreenBlurred';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
-import shouldSetScreenBlurred from '../shouldSetScreenBlurred';
 
 type FreezeWrapperProps = ChildrenProps & {
     /** Prop to disable freeze */
diff --git a/src/libs/Navigation/FreezeWrapper/index.tsx b/src/libs/Navigation/FreezeWrapper/index.tsx
index 4c4d54e610b9..7219666b1b18 100644
--- a/src/libs/Navigation/FreezeWrapper/index.tsx
+++ b/src/libs/Navigation/FreezeWrapper/index.tsx
@@ -1,8 +1,8 @@
 import {useIsFocused, useNavigation, useRoute} from '@react-navigation/native';
 import React, {useEffect, useLayoutEffect, useRef, useState} from 'react';
 import {Freeze} from 'react-freeze';
+import shouldSetScreenBlurred from '@libs/Navigation/shouldSetScreenBlurred';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
-import shouldSetScreenBlurred from '../shouldSetScreenBlurred';
 
 type FreezeWrapperProps = ChildrenProps & {
     /** Prop to disable freeze */