Freeze non top screens to prevent extra-rerenders 2

patches/react-native-screens/details.md

@@ -0,0 +1,8 @@
+# `react-native-screens` patches
+
+### [react-native-screens+4.15.4+001+delay-freeze-until-paint.patch](react-native-screens+4.15.4+001+delay-freeze-until-paint.patch)
+
+- Reason: Delays `DelayedFreeze` before freezing a screen. On iOS (Fabric), freezing a screen while an animation is still in flight (e.g. a popover closing or a swipe-back gesture finishing) blocks React rendering and can cause the app to become unresponsive.
+- Upstream PR/issue: N/A
+- E/App issue: https://github.com/Expensify/App/issues/33725
+- PR introducing patch: https://github.com/Expensify/App/pull/82764

patches/react-native-screens/react-native-screens+4.15.4+001+delay-freeze-until-paint.patch

@@ -0,0 +1,36 @@
+diff --git a/node_modules/react-native-screens/src/components/helpers/DelayedFreeze.tsx b/node_modules/react-native-screens/src/components/helpers/DelayedFreeze.tsx
+index 443da63..72517fd 100644
+--- a/node_modules/react-native-screens/src/components/helpers/DelayedFreeze.tsx
++++ b/node_modules/react-native-screens/src/components/helpers/DelayedFreeze.tsx
+@@ -7,17 +7,27 @@ interface FreezeWrapperProps {
+   children: React.ReactNode;
+ }
+
++// Delay freezing long enough for screen transition and modal/popover dismiss
++// animations to complete. On iOS, freezing a screen while an animation
++// is still in flight (e.g. a popover closing or a swipe-back gesture finishing)
++// blocks React rendering and can cause the app to become unresponsive.
++const FREEZE_DELAY_MS = 400;
++
+ // This component allows one more render before freezing the screen.
+ // Allows activityState to reach the native side and useIsFocused to work correctly.
+ function DelayedFreeze({ freeze, children }: FreezeWrapperProps) {
+   // flag used for determining whether freeze should be enabled
+   const [freezeState, setFreezeState] = React.useState(false);
+
+-  React.useEffect(() => {
+-    const id = setTimeout(() => {
+-      setFreezeState(freeze);
+-    }, 0);
++  React.useEffect(() => {
++    let rafID: number;
++    // Wait for FREEZE_DELAY_MS, then schedule the state update after the next
++    // frame paint so transitional UI states are fully flushed before suspending.
++    const id = setTimeout(() => {
++      rafID = requestAnimationFrame(() => setFreezeState(freeze));
++    }, FREEZE_DELAY_MS);
+     return () => {
+       clearTimeout(id);
++      cancelAnimationFrame(rafID);
+     };
+   }, [freeze]);

patches/react-navigation/@react-navigation+native-stack+7.3.14+003+freeze-screen-below-focused.patch

@@ -0,0 +1,36 @@
+diff --git a/node_modules/@react-navigation/native-stack/lib/module/views/NativeStackView.native.js b/node_modules/@react-navigation/native-stack/lib/module/views/NativeStackView.native.js
+index 35dfc05..1758a24 100644
+--- a/node_modules/@react-navigation/native-stack/lib/module/views/NativeStackView.native.js
++++ b/node_modules/@react-navigation/native-stack/lib/module/views/NativeStackView.native.js
+@@ -376,9 +376,9 @@ export function NativeStackView({
+         const isModal = modalRouteKeys.includes(route.key);
+         const isPreloaded = preloadedDescriptors[route.key] !== undefined && descriptors[route.key] === undefined;
+
+-        // On Fabric, when screen is frozen, animated and reanimated values are not updated
+-        // due to component being unmounted. To avoid this, we don't freeze the previous screen there
+-        const shouldFreeze = isFabric() ? !isPreloaded && !isFocused && !isBelowFocused : !isPreloaded && !isFocused;
++        // Freezing the screen below the focused one is safe on Fabric because
++        // DelayedFreeze defers it to the next macrotask, and transition animations run on the UI thread.
++        const shouldFreeze = !isPreloaded && !isFocused;
+         return /*#__PURE__*/_jsx(SceneView, {
+           index: index,
+           focused: isFocused,
+diff --git a/node_modules/@react-navigation/native-stack/src/views/NativeStackView.native.tsx b/node_modules/@react-navigation/native-stack/src/views/NativeStackView.native.tsx
+index ca15b1d..3191475 100644
+--- a/node_modules/@react-navigation/native-stack/src/views/NativeStackView.native.tsx
++++ b/node_modules/@react-navigation/native-stack/src/views/NativeStackView.native.tsx
+@@ -542,11 +542,9 @@ export function NativeStackView({
+             preloadedDescriptors[route.key] !== undefined &&
+             descriptors[route.key] === undefined;
+
+-          // On Fabric, when screen is frozen, animated and reanimated values are not updated
+-          // due to component being unmounted. To avoid this, we don't freeze the previous screen there
+-          const shouldFreeze = isFabric()
+-            ? !isPreloaded && !isFocused && !isBelowFocused
+-            : !isPreloaded && !isFocused;
++          // Freezing the screen below the focused one is safe on Fabric because
++          // DelayedFreeze defers it to the next macrotask, and transition animations run on the UI thread.
++          const shouldFreeze = !isPreloaded && !isFocused;
+
+           return (
+             <SceneView

patches/react-navigation/details.md

@@ -39,6 +39,14 @@
 - PR Introducing Patch: [#37891](https://github.com/Expensify/App/pull/37891)
 - PR Updating Patch: [#64155](https://github.com/Expensify/App/pull/64155) 
 
+### [@react-navigation+native-stack+7.3.14+003+freeze-screen-below-focused.patch](@react-navigation+native-stack+7.3.14+003+freeze-screen-below-focused.patch)
+
+- Reason: Removes the `isBelowFocused` exception on Fabric that prevented freezing the screen directly below the focused one. This is now safe because `DelayedFreeze` in `react-native-screens` defers freezing to the next macrotask, and native-stack transition animations run on the UI thread independently of the React tree.
+- Upstream PR/issue: N/A
+- E/App issue: N/A
+- PR Introducing Patch: https://github.com/Expensify/App/pull/82764
+- PR Updating Patch: N/A
+
 ### [@react-navigation+native+7.1.10+001+initial.patch](@react-navigation+native+7.1.10+001+initial.patch)
 
 - Reason: Allows us to use some more advanced navigation actions without messing up the browser history
@@ -75,4 +83,4 @@
 - Upstream PR/issue: N/A
 - E/App issue: [#65709](https://github.com/Expensify/App/issues/65211)
 - PR Introducing Patch: [#65836](https://github.com/Expensify/App/pull/66890)
-- PR Updating Patch: N/A
+- PR Updating Patch: N/A

src/hooks/useKeyboardShortcut.ts

@@ -2,6 +2,7 @@ import {useEffect} from 'react';
 import type {GestureResponderEvent} from 'react-native';
 import type {ValueOf} from 'type-fest';
 import KeyboardShortcut from '@libs/KeyboardShortcut';
+import {useScreenFreezeContext} from '@libs/Navigation/PlatformStackNavigation/createPlatformStackNavigatorComponent/ScreenFreezeContext';
 import CONST from '@src/CONST';
 
 type Shortcut = ValueOf<typeof CONST.KEYBOARD_SHORTCUTS>;
@@ -42,11 +43,14 @@ export default function useKeyboardShortcut(shortcut: Shortcut, callback: (e?: G
         shouldStopPropagation = false,
     } = config;
 
+    const {registerFreezeDefer} = useScreenFreezeContext();
+
     useEffect(() => {
         if (!isActive) {
             return () => {};
         }
 
+        const unregisterFreezeDefer = registerFreezeDefer();
         const unsubscribe = KeyboardShortcut.subscribe(
             shortcut.shortcutKey,
             callback,
@@ -62,6 +66,7 @@ export default function useKeyboardShortcut(shortcut: Shortcut, callback: (e?: G
 
         return () => {
             unsubscribe();
+            unregisterFreezeDefer();
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isActive, callback, captureOnInputs, excludedNodes, priority, shortcut.descriptionKey, shortcut.modifiers.join(), shortcut.shortcutKey, shouldBubble, shouldPreventDefault]);

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

@@ -41,6 +41,7 @@ const SplitNavigatorComponent = createPlatformStackNavigatorComponent('SplitNavi
     defaultScreenOptions: defaultPlatformStackScreenOptions,
     useCustomState: useCustomSplitNavigatorState,
     NavigationContentWrapper: SidebarSpacerWrapper,
+    freezeNonTopScreens: true,
 });
 
 function createSplitNavigator<

src/libs/Navigation/PlatformStackNavigation/createPlatformStackNavigatorComponent/ScreenFreezeContext.ts

@@ -0,0 +1,23 @@
+import {createContext, useContext} from 'react';
+
+type ScreenFreezeContextType = {
+    /**
+     * Register a freeze defer — signals that this component has cleanup work
+     * (e.g., keyboard shortcut unsubscribing) that must run before the screen is frozen.
+     * When any defers are registered, ScreenFreezeWrapper delays freezing by one frame
+     * so cleanup can execute first.
+     * Returns an unregister function.
+     */
+    registerFreezeDefer: () => () => void;
+};
+
+const ScreenFreezeContext = createContext<ScreenFreezeContextType>({
+    registerFreezeDefer: () => () => {},
+});
+
+function useScreenFreezeContext() {
+    return useContext(ScreenFreezeContext);
+}
+
+export default ScreenFreezeContext;
+export {useScreenFreezeContext};

src/libs/Navigation/PlatformStackNavigation/createPlatformStackNavigatorComponent/ScreenFreezeWrapper.tsx

@@ -0,0 +1,59 @@
+import React, {useLayoutEffect, useRef, useState} from 'react';
+import {Freeze} from 'react-freeze';
+import TooltipSense from '@components/Tooltip/TooltipSense';
+import {areAllModalsHidden} from '@userActions/Modal';
+import ScreenFreezeContext from './ScreenFreezeContext';
+
+type ScreenFreezeWrapperProps = {
+    /** Whether the screen is not currently visible to the user */
+    isScreenBlurred: boolean;
+
+    /** The screen content to freeze when blurred */
+    children: React.ReactNode;
+};
+
+function ScreenFreezeWrapper({isScreenBlurred, children}: ScreenFreezeWrapperProps) {
+    const [frozen, setFrozen] = useState(false);
+    const freezeDeferCountRef = useRef(0);
+
+    const registerFreezeDefer = () => {
+        freezeDeferCountRef.current++;
+        return () => {
+            freezeDeferCountRef.current--;
+        };
+    };
+
+    const contextValue = {registerFreezeDefer};
+
+    // Decouple the Suspense render task so it won't be interrupted by React's concurrent mode
+    // and stuck in an infinite loop
+    useLayoutEffect(() => {
+        // When unfreezing, always apply immediately so the screen is visible right away.
+        if (!isScreenBlurred) {
+            // eslint-disable-next-line react-hooks/set-state-in-effect
+            setFrozen(false);
+            return;
+        }
+
+        // When there are active freeze defers (e.g. keyboard shortcuts that need to unsubscribe),
+        // or when a modal/tooltip is still open, defer the freezing by one frame.
+        if (freezeDeferCountRef.current > 0 || TooltipSense.isActive() || !areAllModalsHidden()) {
+            const id = requestAnimationFrame(() => setFrozen(isScreenBlurred));
+            return () => {
+                cancelAnimationFrame(id);
+            };
+        }
+
+        // No blockers or overlays — freeze immediately.
+        // eslint-disable-next-line react-hooks/set-state-in-effect
+        setFrozen(isScreenBlurred);
+    }, [isScreenBlurred]);
+
+    return (
+        <ScreenFreezeContext.Provider value={contextValue}>
+            <Freeze freeze={frozen}>{children}</Freeze>
+        </ScreenFreezeContext.Provider>
+    );
+}
+
+export default ScreenFreezeWrapper;

src/libs/Navigation/PlatformStackNavigation/createPlatformStackNavigatorComponent/index.tsx

@@ -13,6 +13,7 @@ import type {
     PlatformStackNavigatorProps,
     PlatformStackRouterOptions,
 } from '@libs/Navigation/PlatformStackNavigation/types';
+import ScreenFreezeWrapper from './ScreenFreezeWrapper';
 
 function createPlatformStackNavigatorComponent<RouterOptions extends PlatformStackRouterOptions = PlatformStackRouterOptions>(
     displayName: string,
@@ -24,6 +25,7 @@ function createPlatformStackNavigatorComponent<RouterOptions extends PlatformSta
     const ExtraContent = options?.ExtraContent;
     const NavigationContentWrapper = options?.NavigationContentWrapper;
     const useCustomEffects = options?.useCustomEffects ?? (() => undefined);
+    const freezeNonTopScreens = options?.freezeNonTopScreens;
 
     function PlatformNavigator({
         id,
@@ -100,6 +102,25 @@ function createPlatformStackNavigatorComponent<RouterOptions extends PlatformSta
             };
         }, [persistentScreens, state]);
 
+        // Wrap each screen's render function with ScreenFreezeWrapper to freeze non-top screens.
+        // This prevents off-screen components from re-rendering.
+        // Persistent screens (e.g. sidebar) are excluded from freezing so they stay interactive.
+        let wrappedDescriptors = descriptors;
+        if (freezeNonTopScreens) {
+            const topRouteKey = state.routes[state.index]?.key;
+            const result: typeof descriptors = {};
+            for (const [key, descriptor] of Object.entries(descriptors)) {
+                const isOnTop = key === topRouteKey;
+                const isPersistent = persistentScreens?.includes(descriptor.route.name);
+                const isScreenBlurred = !isOnTop && !isPersistent;
+                result[key] = {
+                    ...descriptor,
+                    render: () => <ScreenFreezeWrapper isScreenBlurred={isScreenBlurred}>{descriptor.render()}</ScreenFreezeWrapper>,
+                };
+            }
+            wrappedDescriptors = result;
+        }
+
         const Content = useMemo(
             () => (
                 <NavigationContent>
@@ -108,7 +129,7 @@ function createPlatformStackNavigatorComponent<RouterOptions extends PlatformSta
                         {...props}
                         direction="ltr"
                         state={mappedState}
-                        descriptors={descriptors}
+                        descriptors={wrappedDescriptors}
                         navigation={navigation}
                         describe={describe}
                     />
@@ -119,7 +140,7 @@ function createPlatformStackNavigatorComponent<RouterOptions extends PlatformSta
                     )}
                 </NavigationContent>
             ),
-            [NavigationContent, customCodePropsWithCustomState, describe, descriptors, mappedState, navigation, props],
+            [NavigationContent, customCodePropsWithCustomState, describe, wrappedDescriptors, mappedState, navigation, props],
         );
 
         // eslint-disable-next-line react/jsx-props-no-spreading

src/libs/Navigation/PlatformStackNavigation/types/NavigatorComponent.ts

@@ -56,6 +56,7 @@ type CreatePlatformStackNavigatorComponentOptions<RouterOptions extends Platform
     useCustomEffects?: CustomEffectsHook<ParamList>;
     ExtraContent?: ExtraContent;
     NavigationContentWrapper?: NavigationContentWrapper;
+    freezeNonTopScreens?: boolean;
 };
 
 export type {CustomCodeProps, CustomStateHookProps, CustomEffectsHookProps, CreatePlatformStackNavigatorComponentOptions, ExtraContentProps};

src/pages/media/AttachmentModalScreen/AttachmentModalBaseContent/index.tsx

@@ -166,11 +166,12 @@ function AttachmentModalBaseContent({
             return;
         }
 
-        if (onConfirm) {
-            onConfirm(Object.assign(files ?? {}, {source} as FileObject));
-        }
-
         onClose?.();
+
+        // Defer onConfirm to the next frame so the target screen has time to unfreeze and re-mount its refs (e.g. composerRef.clearWorklet)
+        requestAnimationFrame(() => {
+            onConfirm?.(Object.assign(files ?? {}, {source} as FileObject));
+        });
     }, [isConfirmButtonDisabled, onConfirm, onClose, files, source]);
 
     // Close the modal when the escape key is pressed

src/pages/workspace/members/WorkspaceInviteMessageComponent.tsx

@@ -142,7 +142,7 @@ function WorkspaceInviteMessageComponent({
         }
 
         if ((backTo as string)?.endsWith('members')) {
-            Navigation.setNavigationActionToMicrotaskQueue(() => Navigation.dismissModal());
+            Navigation.dismissModal();
             return;
         }
 

src/setup/index.ts

@@ -2,6 +2,7 @@ import toSortedPolyfill from 'array.prototype.tosorted';
 import {I18nManager} from 'react-native';
 import Config from 'react-native-config';
 import Onyx from 'react-native-onyx';
+import {enableFreeze} from 'react-native-screens';
 import intlPolyfill from '@libs/IntlPolyfill';
 import {setDeviceID} from '@userActions/Device';
 import initOnyxDerivedValues from '@userActions/OnyxDerived';
@@ -14,6 +15,10 @@ import telemetry from './telemetry';
 const enableDevTools = Config?.USE_REDUX_DEVTOOLS ? Config.USE_REDUX_DEVTOOLS === 'true' : true;
 
 export default function () {
+    // Enable screen freezing on mobile to prevent unnecessary re-renders on screens that are not visible to the user.
+    // This is a no-op on web — for web, we use ScreenFreezeWrapper in SplitNavigator instead.
+    enableFreeze(true);
+
     telemetry();
 
     toSortedPolyfill.shim();