feat(android): Edge-to-edge Modal (navigationBarTranslucent prop)

[zoontek]

Summary:

The future of Android is edge-to-edge and to make the React Native developer experience seamless in this regard, the ecosystem needs to transition from “opaque system bars by default” to “edge-to-edge by default.”

Currently, there's no easy way to have edge-to-edge modals, as they are implemented using Dialog instances (a separate Window) and only provide a statusBarTranslucent prop.

I tried to implement it in react-native-edge-to-edge by listening to the topShow UIManager event. But if it works well when there's a defined animation, we can see a quick jump when there's none, because there's too much delay before the event, and edge-to-edge cannot be applied quick enough to the dialog window.

react-native-edge-to-edge implem with animation (no jump)

no-bug-jump-anim.mov

react-native-edge-to-edge implem without animation (jump)

bug-jump-no-anim.mov

---

For this reason, and because listening to event feels a bit hacky, I think it will be better to go for a new prop directly on RN Modal component: navigationBarTranslucent

Note

navigationBarTranslucent cannot be used without statusBarTranslucent, as setting both enable edge-to-edge, like AndroidX would do and it would requires extra (and unecessary, given the direction Android is taking) work to find a way to keep the status bar opaque but the navigation bar transparent that work on Android 6 to 15+

Additional infos

• Colors used for the buttons navigation bar in the PR are the default Android ones (light and dark)
• Compared to the Google implementation, the light scrim is applied from O_MR1 to Q (and not O to Q) as the android:windowLightNavigationBar style attribute is not available on O (it can only be applied programmatically on API 26).

Changelog:

[ANDROID] [ADDED] - Add navigationBarTranslucent prop to Modal component

Test Plan:

Run the tester app, toggle navigationBarTranslucent:

rn-tester.mov

[facebook-github-bot]

@alanleedev has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

[facebook-github-bot]

@alanleedev merged this pull request in 7a6c7a4.

[react-native-bot]

This pull request was successfully merged by @zoontek in 7a6c7a4

^{When will my fix make it into a release? | How to file a pick request?}

[davor-bauk-sh]

Any chance this could be added to 0.74 (Expo SDK 51) and 0.76 (Expo SDK 52)?