fix: take preload into account when freezing children

apps/src/tests/TestFreeze.tsx

@@ -38,6 +38,14 @@ function HomeScreen({
         title="Go to Details"
         onPress={() => navigation.navigate('Details')}
       />
+      <Button
+        title="Preload Details"
+        onPress={() => navigation.preload('Details')}
+      />
+      <Button
+        title="Preload Details2"
+        onPress={() => navigation.preload('Details2')}
+      />
     </View>
   );
 }
@@ -84,6 +92,7 @@ function App() {
         }}>
         <Stack.Screen name="Home" component={HomeScreen} />
         <Stack.Screen name="Details" component={DetailsScreen} />
+        <Stack.Screen name="Details2" component={DetailsScreen} />
       </Stack.Navigator>
     </NavigationContainer>
   );

src/components/Screen.tsx

@@ -165,7 +165,7 @@
     React.useImperativeHandle(ref, () => innerRef.current!, []);
     const prevActivityState = usePrevious(props.activityState);
 
     const setRef = (ref: ViewConfig) => {
       innerRef.current = ref;
       props.onComponentRef?.(ref);
     };
@@ -177,6 +177,7 @@
     const {
       enabled = screensEnabled(),
       freezeOnBlur = freezeEnabled(),
+      shouldFreeze,
       ...rest
     } = props;
 
@@ -233,7 +234,7 @@
         gestureResponseDistance,
         onGestureCancel,
         style,
         ...props
       } = rest;
 
       if (active !== undefined && activityState === undefined) {
@@ -255,7 +256,7 @@
         }
       }
 
       const handleRef = (ref: ViewConfig) => {
         if (ref?.viewConfig?.validAttributes?.style) {
           ref.viewConfig.validAttributes.style = {
             ...ref.viewConfig.validAttributes.style,
@@ -271,8 +272,12 @@
         }
       };
 
+      const freeze =
+        freezeOnBlur &&
+        (isNativeStack ? Boolean(shouldFreeze) : activityState === 0);
+
       return (
-        <DelayedFreeze freeze={freezeOnBlur && activityState === 0}>
+        <DelayedFreeze freeze={freeze}>
           <AnimatedScreen
             {...props}
             /**
@@ -352,7 +357,7 @@
         style,
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         onComponentRef,
         ...props
       } = rest;
 
       if (active !== undefined && activityState === undefined) {
@@ -360,7 +365,7 @@
       }
       return (
         <Animated.View
           style={[style, { display: activityState !== 0 ? 'flex' : 'none' }]}
           ref={setRef}
           {...props}
         />

src/components/ScreenStack.tsx

@@ -9,19 +9,13 @@ import {
   ScreenStackProps,
 } from '../types';
 import { GHContext, RNSScreensRefContext } from '../contexts';
-import { freezeEnabled } from '../core';
-import DelayedFreeze from './helpers/DelayedFreeze';
 import warnOnce from 'warn-once';
 
 // Native components
 import ScreenStackNativeComponent, {
   NativeProps,
 } from '../fabric/ScreenStackNativeComponent';
 
-function isFabric() {
-  return 'nativeFabricUIManager' in global;
-}
-
 const assertGHProvider = (
   ScreenGestureDetector: (
     props: PropsWithChildren<GestureProviderProps>,
@@ -69,35 +63,13 @@ function ScreenStack(props: ScreenStackProps) {
     passedScreenRefs?.current ?? {},
   );
   const ref = React.useRef(null);
-  const size = React.Children.count(children);
   const ScreenGestureDetector = React.useContext(GHContext);
   const gestureDetectorBridge = React.useRef<GestureDetectorBridge>({
     stackUseEffectCallback: _stackRef => {
       // this method will be overriden in GestureDetector
     },
   });
 
-  // freezes all screens except the top one
-  const childrenWithFreeze = React.Children.map(children, (child, index) => {
-    // @ts-expect-error it's either SceneView in v6 or RouteView in v5
-    const { props, key } = child;
-    const descriptor = props?.descriptor ?? props?.descriptors?.[key];
-    const isFreezeEnabled =
-      descriptor?.options?.freezeOnBlur ?? freezeEnabled();
-
-    // 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 freezePreviousScreen = isFabric()
-      ? size - index > 2
-      : size - index > 1;
-
-    return (
-      <DelayedFreeze freeze={isFreezeEnabled && freezePreviousScreen}>
-        {child}
-      </DelayedFreeze>
-    );
-  });
-
   React.useEffect(() => {
     gestureDetectorBridge.current.stackUseEffectCallback(ref);
   });
@@ -130,7 +102,7 @@ function ScreenStack(props: ScreenStackProps) {
             onFinishTransitioning as NativeProps['onFinishTransitioning']
           }
           ref={ref}>
-          {childrenWithFreeze}
+          {children}
         </ScreenStackNativeComponent>
       </ScreenGestureDetector>
     </RNSScreensRefContext.Provider>

src/components/ScreenStackItem.tsx

@@ -30,6 +30,7 @@ function ScreenStackItem(
     children,
     headerConfig,
     activityState,
+    shouldFreeze,
     stackPresentation,
     contentStyle,
     style,
@@ -132,6 +133,7 @@ function ScreenStackItem(
       enabled
       isNativeStack
       activityState={activityState}
+      shouldFreeze={shouldFreeze}
       stackPresentation={stackPresentation}
       hasLargeHeader={headerConfig?.largeTitle ?? false}
       style={[style, internalScreenStyle]}
@@ -142,6 +144,7 @@ function ScreenStackItem(
             enabled
             isNativeStack
             activityState={activityState}
+            shouldFreeze={shouldFreeze}
             hasLargeHeader={headerConfig?.largeTitle ?? false}
             style={StyleSheet.absoluteFill}>
             {content}

src/types.tsx

@@ -102,6 +102,10 @@ export type SearchBarPlacement = 'automatic' | 'inline' | 'stacked';
 export interface ScreenProps extends ViewProps {
   active?: 0 | 1 | Animated.AnimatedInterpolation<number>;
   activityState?: 0 | 1 | 2 | Animated.AnimatedInterpolation<number>;
+  /**
+   * Boolean indicating that the screen should be frozen with `react-freeze`.
+   */
+  shouldFreeze?: boolean;
   children?: React.ReactNode;
   /**
    * Boolean indicating that swipe dismissal should trigger animation provided by `stackAnimation`. Defaults to `false`.