Current behavior
On Android with @react-navigation/stack, opening a second modal above an existing modal does not visibly animate. The second modal appears immediately at its final position, even though:
- closing the second modal animates normally;
transitionStart and transitionEnd report a normal opening transition of approximately 260 ms; and
- the same configuration animates correctly for the first modal.
The minimal flow is:
- Open
modal-1 from Home.
- Open
modal-2 above modal-1 using the same route name and distinct getId values.
- Observe that
modal-2 appears without its bottom-sheet opening animation.
The route options are:
{
animation: 'default',
cardStyleInterpolator: CardStyleInterpolators.forBottomSheetAndroid,
gestureEnabled: false,
presentation: 'modal',
}
This regressed in @react-navigation/stack@7.6.7:
7.6.6: opening animation works;
7.6.7: opening animation is skipped; and
7.10.22: still affected.
The 7.6.6...7.6.7 comparison contains commit d98552bced, which removed the strict screen-depth guard while fixing blank screens. Without that guard, a deeply covered route can receive an animated activity state during the second modal push instead of remaining numerically inactive, changing the native screen composition during the transition.
This logic originated in PR #11315, which prevents an already inactive screen from briefly reattaching during A → B → C → popTo(B).
Setting detachPreviousScreen: false makes the opening animation visible, but it permanently retains the previous screen and is not a safe workaround.
Expected behavior
Each modal should animate in and out with the configured interpolator, including when another modal is already open, without reattaching deeply covered screens or reintroducing blank frames during pop, replacement, or rapid navigation.
Reproduction
https://github.com/hgray-instawork/react-navigation-js-stack-modal-repro
Platform
Packages
Environment
| package |
version |
| @react-navigation/native |
7.3.16 |
| @react-navigation/stack |
7.10.22 |
| react-native-screens |
4.11.1 |
| react-native-safe-area-context |
5.4.0 |
| react-native-gesture-handler |
2.24.0 |
| react-native |
0.79.6 |
| expo |
53.0.27 |
| node |
24.14.1 |
| npm |
11.11.0 |
Current behavior
On Android with
@react-navigation/stack, opening a second modal above an existing modal does not visibly animate. The second modal appears immediately at its final position, even though:transitionStartandtransitionEndreport a normal opening transition of approximately 260 ms; andThe minimal flow is:
modal-1fromHome.modal-2abovemodal-1using the same route name and distinctgetIdvalues.modal-2appears without its bottom-sheet opening animation.The route options are:
This regressed in
@react-navigation/stack@7.6.7:7.6.6: opening animation works;7.6.7: opening animation is skipped; and7.10.22: still affected.The
7.6.6...7.6.7comparison contains commit d98552bced, which removed the strict screen-depth guard while fixing blank screens. Without that guard, a deeply covered route can receive an animated activity state during the second modal push instead of remaining numerically inactive, changing the native screen composition during the transition.This logic originated in PR #11315, which prevents an already inactive screen from briefly reattaching during
A → B → C → popTo(B).Setting
detachPreviousScreen: falsemakes the opening animation visible, but it permanently retains the previous screen and is not a safe workaround.Expected behavior
Each modal should animate in and out with the configured interpolator, including when another modal is already open, without reattaching deeply covered screens or reintroducing blank frames during pop, replacement, or rapid navigation.
Reproduction
https://github.com/hgray-instawork/react-navigation-js-stack-modal-repro
Platform
Packages
Environment