Multiple transitions between screens causes app to crash

[marklawlor]

Description

Repeated navigation between 2 screens using React Navigation's Native Stack with a getId() prop causes the app to "crash". I use the term crash loosely as the behaviour is different per platform but both result in the app becoming unusable.

iOS

react-native elements that use Pressibility become stuck in their "onPress" state, preventing them from receiving further onPress events. The issue does not occur with non-Pressibility elements such as <TouchableOpacity />.

You can observe this behaviour with the reproduction snack by repeatedly moving between the two screens using the Forwards/Backwards <Text /> items. After 3 transitions, the <Text /> items are no longer pressable and will be rendered with their onPress highlighting.

Android

After 3 transitions, the native stack header will disappear. After 4 transitions, the native stack will no longer render any visible context.

Expo Router issue: expo/expo#33658
React Navigation issue: react-navigation/react-navigation#12346

Steps to reproduce

1. Open Snack
2. Click "forwards" / "backwards" 3-5 times

Snack or a link to a repository

https://snack.expo.dev/@mwlawlor/react-navigation-native-stack-stuck

Screens version

3.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