react-navigation / react-navigation/react-navigation
Second stacked modal skips its opening animation on Android
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 24.5k
- Forks
- 5.1k
- Avg merge
- 1d 5h
- Merged PRs (30d)
- 18
Description
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;
transitionStartandtransitionEndreport a normal opening transition of approximately 260 ms; and- the same configuration animates correctly for the first modal.
The minimal flow is:
- Open
modal-1fromHome. - Open
modal-2abovemodal-1using the same route name and distinctgetIdvalues. - Observe that
modal-2appears 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; and7.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
- Android
- iOS
- Web
- Windows
- MacOS
Packages
- @react-navigation/stack
Environment
- I've removed the packages that I don't use
| 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 |
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with commit d98552bced and PR #11315, then reproduce the stacked-modal flow in the linked minimal example on Android. Trace the screen-depth and animated activity-state behavior described in the issue. Done means the second modal opens with its configured animation without reattaching deeply covered screens or causing blank frames during pop, replacement, or rapid navigation.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100