mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Mathieu Acthernoene
7a6c7a462a
Summary: The future of Android is [edge-to-edge](https://github.com/react-native-community/discussions-and-proposals/discussions/827) 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`](https://github.com/zoontek/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) https://github.com/user-attachments/assets/4933a102-87a5-40e4-98d9-47f8c0817592 ### react-native-edge-to-edge implem without animation (jump) https://github.com/user-attachments/assets/e4675589-08fe-44fe-b9d8-0a6b3552b461 --- 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](https://github.com/androidx/androidx/blob/androidx-main/activity/activity/src/main/java/androidx/activity/EdgeToEdge.kt) 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](https://github.com/androidx/androidx/blob/androidx-main/activity/activity/src/main/java/androidx/activity/EdgeToEdge.kt#L37) and [dark](https://github.com/androidx/androidx/blob/androidx-main/activity/activity/src/main/java/androidx/activity/EdgeToEdge.kt#L42)) - Compared to the Google implementation, the light scrim is applied from `O_MR1` to `Q` (and not `O` to `Q`) as the [`android:windowLightNavigationBar`](https://developer.android.com/reference/android/R.attr#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 Pull Request resolved: https://github.com/facebook/react-native/pull/47254 Test Plan: Run the tester app, toggle `navigationBarTranslucent`: https://github.com/user-attachments/assets/286d173b-35a5-4951-9105-f9f7562d6764 ----- did some additional testing with RNTester using different justification |flex-start|flex-end| |https://pxl.cl/5Rd20|https://pxl.cl/5Rd21| Reviewed By: javache Differential Revision: D65103501 Pulled By: alanleedev fbshipit-source-id: ef6473ecd785976d3e26c77bbc212222ec96c9f2