diff --git a/TestsExample/App.js b/TestsExample/App.js index 60733f9b5a..647c2d5355 100644 --- a/TestsExample/App.js +++ b/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 ( diff --git a/TestsExample/src/TestFreeze.tsx b/TestsExample/src/TestFreeze.tsx index bff70a9a5b..cff3b757d4 100644 --- a/TestsExample/src/TestFreeze.tsx +++ b/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(); type Dispatch = (value: number) => void; @@ -52,7 +49,7 @@ function DetailsScreen({ navigation: NativeStackNavigationProp; }) { const value = useValue(); - // should only 2 renders appear at the time + // only 1 'render' should appear at the time console.log('render', value); return ( diff --git a/src/index.native.tsx b/src/index.native.tsx index f481461cba..6eaa7ec985 100644 --- a/src/index.native.tsx +++ b/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 2}>{child}; - }); + const size = React.Children.count(children); + // freezes all screens except the top one + const childrenWithFreeze = React.Children.map(children, (child, index) => ( + 1}>{child} + )); return ( - {childrenWithProps} + {childrenWithFreeze} ); } return ; } +// 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 { private ref: React.ElementRef | null = null; private closing = new Animated.Value(0); @@ -215,28 +228,38 @@ class Screen extends React.Component { const processedColor = processColor(statusBarColor); return ( - + { + 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 } - ) - }> - + ], + { 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 { {children} )} - - + + ); } else { // same reason as above