feat: don't set display: 'none' on frozen screens

TestsExample/App.js

@@ -1,6 +1,7 @@
 /* eslint-disable no-unused-vars */
 import React from 'react';
 
+import {enableFreeze} from 'react-native-screens';
 import {ReanimatedScreenProvider} from 'react-native-screens/reanimated';
 
 import Test42 from './src/Test42';
@@ -65,6 +66,8 @@ import Test1162 from './src/Test1162';
 import Test1188 from './src/Test1188';
 import TestFreeze from './src/TestFreeze';
 
+enableFreeze(true);
+
 export default function App() {
   return (
     <ReanimatedScreenProvider>

TestsExample/src/TestFreeze.tsx

@@ -1,6 +1,5 @@
 import React, {useState, useEffect} from 'react';
 import {View, Text, Button, ScrollView} from 'react-native';
-import {enableFreeze} from 'react-native-screens';
 import {NavigationContainer, ParamListBase} from '@react-navigation/native';
 // import {createStackNavigator} from '@react-navigation/stack';
 // import {createNativeStackNavigator} from '@react-navigation/native-stack';
@@ -9,8 +8,6 @@ import {
   NativeStackNavigationProp,
 } from 'react-native-screens/native-stack';
 
-enableFreeze(true);
-
 const store = new Set<Dispatch>();
 
 type Dispatch = (value: number) => void;
@@ -52,7 +49,7 @@ function DetailsScreen({
   navigation: NativeStackNavigationProp<ParamListBase>;
 }) {
   const value = useValue();
-  // should only 2 renders appear at the time
+  // only 1 'render' should appear at the time
   console.log('render', value);
   return (
     <ScrollView>

src/index.native.tsx

@@ -157,19 +157,32 @@ function MaybeFreeze({
 function ScreenStack(props: ScreenStackProps) {
   if (ENABLE_FREEZE) {
     const { children, ...rest } = props;
-    const count = React.Children.count(children);
-    const childrenWithProps = React.Children.map(children, (child, index) => {
-      return <Freeze freeze={count - index > 2}>{child}</Freeze>;
-    });
+    const size = React.Children.count(children);
+    // freezes all screens except the top one
+    const childrenWithFreeze = React.Children.map(children, (child, index) => (
+      <Freeze freeze={size - index > 1}>{child}</Freeze>
+    ));
     return (
       <ScreensNativeModules.NativeScreenStack {...rest}>
-        {childrenWithProps}
+        {childrenWithFreeze}
       </ScreensNativeModules.NativeScreenStack>
     );
   }
   return <ScreensNativeModules.NativeScreenStack {...props} />;
 }
 
+// Incomplete type, all accessible properties available at:
+// react-native/Libraries/Components/View/ReactNativeViewViewConfig.js
+interface ViewConfig extends View {
+  viewConfig: {
+    validAttributes: {
+      style: {
+        display: boolean;
+      };
+    };
+  };
+}
+
 class Screen extends React.Component<ScreenProps> {
   private ref: React.ElementRef<typeof View> | null = null;
   private closing = new Animated.Value(0);
@@ -215,28 +228,38 @@ class Screen extends React.Component<ScreenProps> {
       const processedColor = processColor(statusBarColor);
 
       return (
-        <AnimatedNativeScreen
-          {...props}
-          statusBarColor={processedColor}
-          activityState={activityState}
-          ref={this.setRef}
-          onTransitionProgress={
-            !isNativeStack
-              ? undefined
-              : Animated.event(
-                  [
-                    {
-                      nativeEvent: {
-                        progress: this.progress,
-                        closing: this.closing,
-                        goingForward: this.goingForward,
+        <MaybeFreeze freeze={activityState === 0}>
+          <AnimatedNativeScreen
+            {...props}
+            statusBarColor={processedColor}
+            activityState={activityState}
+            // This prevents showing blank screen when navigating between multiple screens with freezing
+            // https://github.com/software-mansion/react-native-screens/pull/1208
+            ref={(ref: ViewConfig) => {
+              if (ref?.viewConfig?.validAttributes?.style) {
+                ref.viewConfig.validAttributes.style = {
+                  ...ref.viewConfig.validAttributes.style,
+                  display: false,
+                };
+              }
+              this.setRef(ref);
+            }}
+            onTransitionProgress={
+              !isNativeStack
+                ? undefined
+                : Animated.event(
+                    [
+                      {
+                        nativeEvent: {
+                          progress: this.progress,
+                          closing: this.closing,
+                          goingForward: this.goingForward,
+                        },
                       },
-                    },
-                  ],
-                  { useNativeDriver: true }
-                )
-          }>
-          <MaybeFreeze freeze={activityState === 0}>
+                    ],
+                    { useNativeDriver: true }
+                  )
+            }>
             {!isNativeStack ? ( // see comment of this prop in types.tsx for information why it is needed
               children
             ) : (
@@ -249,8 +272,8 @@ class Screen extends React.Component<ScreenProps> {
                 {children}
               </TransitionProgressContext.Provider>
             )}
-          </MaybeFreeze>
-        </AnimatedNativeScreen>
+          </AnimatedNativeScreen>
+        </MaybeFreeze>
       );
     } else {
       // same reason as above