implement new freeze wrapper

src/libs/Navigation/AppNavigator/FreezeWrapper/getIsScreenBlurred.ts

@@ -0,0 +1,9 @@
+import type {NavigationState} from '@react-navigation/native';
+import {isFullScreenName} from '@libs/NavigationUtils';
+
+function getIsScreenBlurred(state: NavigationState, currentRouteKey: string) {
+    const lastFullScreenRoute = state.routes.findLast((route) => isFullScreenName(route.name));
+    return lastFullScreenRoute?.key !== currentRouteKey;
+}
+
+export default getIsScreenBlurred;

src/libs/Navigation/AppNavigator/FreezeWrapper/index.native.tsx

@@ -0,0 +1,28 @@
+import {useNavigation, useRoute} from '@react-navigation/native';
+import React, {useEffect, useState} from 'react';
+import {Freeze} from 'react-freeze';
+import type ChildrenProps from '@src/types/utils/ChildrenProps';
+import getIsScreenBlurred from './getIsScreenBlurred';
+
+type FreezeWrapperProps = ChildrenProps & {
+    /** Prop to disable freeze */
+    keepVisible?: boolean;
+};
+
+function FreezeWrapper({keepVisible = false, children}: FreezeWrapperProps) {
+    const navigation = useNavigation();
+    const currentRoute = useRoute();
+
+    const [isScreenBlurred, setIsScreenBlurred] = useState(false);
+
+    useEffect(() => {
+        const unsubscribe = navigation.addListener('state', (e) => setIsScreenBlurred(getIsScreenBlurred(e.data.state, currentRoute.key)));
+        return () => unsubscribe();
+    }, [currentRoute.key, navigation]);
+
+    return <Freeze freeze={isScreenBlurred && !keepVisible}>{children}</Freeze>;
+}
+
+FreezeWrapper.displayName = 'FreezeWrapper';
+
+export default FreezeWrapper;

src/libs/Navigation/AppNavigator/FreezeWrapper/index.tsx

@@ -0,0 +1,35 @@
+import {useNavigation, useRoute} from '@react-navigation/native';
+import React, {useEffect, useLayoutEffect, useState} from 'react';
+import {Freeze} from 'react-freeze';
+import type ChildrenProps from '@src/types/utils/ChildrenProps';
+import getIsScreenBlurred from './getIsScreenBlurred';
+
+type FreezeWrapperProps = ChildrenProps & {
+    /** Prop to disable freeze */
+    keepVisible?: boolean;
+};
+
+function FreezeWrapper({keepVisible = false, children}: FreezeWrapperProps) {
+    const navigation = useNavigation();
+    const currentRoute = useRoute();
+
+    const [isScreenBlurred, setIsScreenBlurred] = useState(false);
+    const [freezed, setFreezed] = useState(false);
+
+    useEffect(() => {
+        const unsubscribe = navigation.addListener('state', (e) => setIsScreenBlurred(getIsScreenBlurred(e.data.state, currentRoute.key)));
+        return () => unsubscribe();
+    }, [currentRoute.key, navigation]);
+
+    // Decouple the Suspense render task so it won't be interrupted by React's concurrent mode
+    // and stuck in an infinite loop
+    useLayoutEffect(() => {
+        setFreezed(isScreenBlurred && !keepVisible);
+    }, [isScreenBlurred, keepVisible]);
+
+    return <Freeze freeze={freezed}>{children}</Freeze>;
+}
+
+FreezeWrapper.displayName = 'FreezeWrapper';
+
+export default FreezeWrapper;