navigation.preload() with enableFreeze breaks app, stopping rendering

[hirbod]

Description

React Navigation v7 introduces navigation.preload().

If you preload a screen without navigating to it, the entire app stops rendering because react-freeze is triggered, halting the rendering process. To resolve this, you must navigate to the preloaded screen and then pop it to unfreeze the app.

I discovered this issue by calling preload() in an effect and during onPressIn, then aborting the press (by moving my finger away). In both cases, the app stopped rendering updates.

However, once I navigated to the preloaded screen and returned, the app resumed working as expected.

React Native Screens should avoid applying any freezing logic when a screen is pre-rendered using preload().

React Navigation already passes activityState, so react-freeze should read it:
https://github.com/react-navigation/react-navigation/blob/8209a855b312db1104270774810f6d9a7e0395b6/packages/native-stack/src/views/NativeStackView.native.tsx#L283

Steps to reproduce

Everything said already, the Snack is fake, sorry! The description is clear enough.

Snack or a link to a repository

https://snack.expo.dev/@hirbod/fake

Screens version

4.3.0

React Native version

0.76.3

Platforms

Android, iOS

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[kkafar]

Reproducible! Thanks

[hirbod]

I think the cause is pretty clear now: https://github.com/software-mansion/react-native-screens/blob/main/src/components/Screen.tsx#L275

@satya164 do you think it would make sense to introduce a new state number for preloaded screens?

[WoLewicki]

I'm working on it right now. Does it happen only in native-stack?

[satya164]

I'm fine with anything, new state or separate prop

[hirbod]

I was only able to reproduce it on native-stack, didn't freeze on web for me

[WoLewicki]

I guess it is this logic then:

react-native-screens/src/components/ScreenStack.tsx

Lines 90 to 97 in 8b9b9f2

	const freezePreviousScreen = isFabric()
	? size - index > 2
	: size - index > 1;
	return (
	<DelayedFreeze freeze={isFreezeEnabled && freezePreviousScreen}>
	{child}
	</DelayedFreeze>

for native-stack, which just checks children, not looking at their activityState.

[WoLewicki]

I guess you only saw it on old arch @hirbod ?

[hirbod]

Unfortunately I haven't had the chance to upgrade to the new arch yet, so your assumption is right @WoLewicki

[satya164]

@hirbod can you check JS stack? on web i don't think we're using react-native-screens on native-stack - and consequently no-freeze

[satya164]

@WoLewicki maybe react-navigation should explicitly pass something like freeze={false} for active and preloaded screen and freeze={true} for inactive screens? maybe better than guessing based on activityState 🤔

[hirbod]

@satya164 Is react-freeze integrated to JS stack? We're using expo-router, does it even support the JS stack? I can try to replicate it though

[satya164]

@hirbod react navigation isn't using freeze directly, but it is integrated into react-native-screens, and JS stack uses react-native-screens for detaching inactive screens. so i assume this issue also affects JS stack.

iirc with expo router you can use any navigator with a layout, but i'm not deeply familiar with its API.