Reordering screens in Native Stack results in buggy behavior on iOS and Android

[satya164]

Description

Currently the library doesn't seem to be able to handle screens being re-ordered, and exhibits different kind of bugs on iOS and Android.

Reordering screens can easily happen when using getId which ensures a single instance of the screen in the stack, or can be done with navigation.reset in React Navigation. So it's important that React Native Screens can handle this.

Steps to reproduce

Repro is a snack link, but I can also repro on a fresh CLI project on both Simulator/Emulator and Device.

Android:

• Open the snack
• Tap "Add screen"
• Tap "Bring first screen to front"
• Go back using the back button in the header
• Observe that the screen no longer contains a header

screen-20241215-215656.mp4

iOS:

• Open the snack
• Tap "Add screen"
• Tap "Bring first screen to front"
• Observe that there's no animation (unlike Android)
• Go back using the back button in the header
• Observe that the buttons on the screen are not responsive

ScreenRecording_12-15-2024.21-55-45_1.mp4

Snack or a link to a repository

https://snack.expo.dev/@satya164/react-native-screens-reorder-screens

Screens version

4.3.0

React Native version

0.76.5

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

Real device

Device model

iPhone 15, Pixel 8a

Acknowledgements

Yes

[kkafar]

Thanks for the report. There are some restrictions to the modal screen being reshuffled for sure, but in the case of 'card' presentation this is not intended.