Fade animation of modal backdrop not working when navigating to screen with `presentation: 'modal'` in `NativeStackNavigator`

[krismeld]

Description

On physical iOS devices, the backdrop (background overlay) of a modal screen does not fade in when using presentation: 'modal' with NativeStackNavigator. This results in a jarring, unsmooth appearance when opening modals.

Details

• Only occurs with NativeStackNavigator. When using the regular StackNavigator, the backdrop fade animation works as expected.
• Only affects physical iOS devices. The animation works correctly on simulators.
• Only affects the first modal. If you open a second modal on top of the first, the fade animation does apply to the second modal’s backdrop.
• Only on modal enter. When closing (exiting) a modal, the backdrop fade animation always works as expected.
• Occurs in both new and old React Native architectures.

---

Video Demonstrations

NativeStackNavigator (Issue Present)

• The first modal opens without a backdrop fade-in. Notice that the second modal’s backdrop does fade in as expected:

https://github.com/user-attachments/assets/bdafcbd9-b553-42cb-8007-39f467557f31

StackNavigator (Works Correctly)

• The backdrop fade animation works on every modal:

https://github.com/user-attachments/assets/91d8d820-8681-4ed6-bf7d-0b1a4b32d8c9

---

Summary

• First modal with NativeStackNavigator on physical iOS: no backdrop fade-in animation
• Every other case (simulator, second modal, exit, StackNavigator): fade animation works as expected

Steps to reproduce

1. Open expo snack on physical device
2. Click Open Modal 1 and observe the missing fade animation on the backdrop.

Snack or a link to a repository

https://snack.expo.dev/@supermelle/modal

Screens version

4.11.1

React Native version

0.80.0

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

None

Build type

Release mode

Device

Real device

Device model

iPhone 16 Pro and iPhone 13

Acknowledgements

Yes

[kkafar]

Hey, thanks for the report. We'll look into this, however I have bad feelings about this. We do not animate modal presentation ourselves, instead presentation is delegated to UIKit, therefore we do not have that much control over it. It is surprising why it animates nicely with regular stack

[krismeld]

@kkafar Thanks a lot for looking into it, even if it is something delegated to UiKit.

What I also find strange is that the second modal on top of the first one animates correctly.