From ec77a7a12bb7994f1917ccd5ea73e86c1d47b880 Mon Sep 17 00:00:00 2001 From: Jason Zheng Date: Fri, 11 Sep 2026 11:05:29 -0700 Subject: [PATCH] Fix Android navigation bar transparency for Modal Summary: Fixes the issue described in [#39018](https://github.com/react/react-native/issues/39018), where it is currently impossible to draw a correct modal scrim on Android. The issue described the modal scrim not covering both the status bar and the navigation bar. While the status bar is now already covered, the navigation bar is not. ### Root Cause Modal currently has two Android props related to translucency: `statusBarTranslucent` and `navigationBarTranslucent`. Both options are essentially redundant on modern Android devices, as edge-to-edge mode in React Native has been enabled for all Android 15+ devices. Even with navigation bar translucency enabled, the 3-button navigation bar and 2-button gesture bar still have a semi-opaque contrast bar overlaid on top. The color is based on the current device theming: light mode shows black nav buttons with a semi-opaque white background, while dark mode shows white nav buttons with a semi-opqaue black background. This leads to an issue when a light mode app wants to open a semi-transparent dark modal scrim. Since the nav bar still has a semi-white background, the modal scrim looks off and not fully edge to edge. ### This PR Modify `ReactModalHostView` so that when Modal's `transparent` prop is set to true and `navigationBarTranslucent` is enabled, disable `isNavigationBarContrastEnforced`. This maintains the existing contract for `transparent` which assumes the Modal fills the entire view. Changelog: [Android][Fixed] Fix Android navigation bar transparency for Modal Differential Revision: D119589178 --- .../java/com/facebook/react/views/modal/ReactModalHostView.kt | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostView.kt b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostView.kt index 64c61a19f2ac..f0415bf23dd1 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostView.kt +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostView.kt @@ -395,6 +395,9 @@ public class ReactModalHostView(context: ThemedReactContext) : // Navigation bar cannot be translucent without status bar being translucent too if (navigationBarTranslucent) { dialogWindow.enableEdgeToEdge() + if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q && transparent) { + dialogWindow.isNavigationBarContrastEnforced = false + } } else { dialogWindow.disableEdgeToEdge() dialogWindow.setStatusBarTranslucency(statusBarTranslucent)