react-navigation / react-navigation/react-navigation

Second stacked modal skips its opening animation on Android

Open
#13,213 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

package:stack platform:android repro provided
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;
  • 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:

  1. Open modal-1 from Home.
  2. Open modal-2 above modal-1 using the same route name and distinct getId values.
  3. 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
  • 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.