Skip to content

Second stacked modal skips its opening animation on Android #13213

Description

@hgray-instawork

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions