enforceNavigationBarContrast ignored by React Native Modal core component

[spasmodiumspam-web]

Before submitting a new issue

• I tested using the latest version of the library, as the bug might be already fixed.
• I tested using a supported version of react native.
• I checked for possible duplicate issues, with possible answers.

Bug summary

As you can see in the table provided below, when the 3 buttons navigation bar is enabled in Android system settings, the React Native core modal component ignores the transparency settings mentioned in the docs. It does something for gesture navigation, though.

The desired (and probably intended) behaviour is that the navigation bar should also be transparent (4th pic).

This was tested on an Android 16 emulator.

styles.xml looks like this:

<resources>
    <style name="AppTheme" parent="Theme.EdgeToEdge">
        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
        <item name="enforceNavigationBarContrast">false</item>
        <item name="android:includeFontPadding">false</item>
    </style>
</resources>

When gesture navigation is enabled in android
navigationBarTranslucent/statusBarTranslucent set to true	navigationBarTranslucent/statusBarTranslucent set to false
When button navigation is enabled in android
navigationBarTranslucent/statusBarTranslucent set to true	navigationBarTranslucent/statusBarTranslucent set to false

Library version

1.7.0

Environment info

System:
  OS: macOS 14.6.1
  CPU: (8) arm64 Apple M1 Pro
  Memory: 1.06 GB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 25.2.1
    path: /opt/homebrew/bin/node
  Yarn:
    version: 1.22.19
    path: /usr/local/bin/yarn
  npm:
    version: 11.6.3
    path: /opt/homebrew/bin/npm
  Watchman:
    version: 2025.04.28.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.2
      - iOS 18.2
      - macOS 15.2
      - tvOS 18.2
      - visionOS 2.2
      - watchOS 11.2
  Android SDK: Not Found
IDEs:
  Android Studio: 2025.2 AI-252.25557.131.2521.14432022
  Xcode:
    version: 16.2/16C5032a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 21.0.8
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.0.0
    wanted: 20.0.0
  react:
    installed: 19.1.0
    wanted: 19.1.0
  react-native:
    installed: 0.81.5
    wanted: 0.81.5
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Steps to reproduce

Paste the code inside the Reproducible sample code section

Reproducible sample code

// App.tsx
import React, { useState } from "react";
import {
  Modal,
  View,
  TouchableOpacity,
  StyleSheet,
  Text,
} from "react-native";

export default function App() {
  const [visible, setVisible] = useState(false);

  return (
    <View style={styles.container}>
      {/* Open modal button */}
      <TouchableOpacity style={styles.openBtn} onPress={() => setVisible(true)}>
        <Text style={styles.openText}>Open Modal</Text>
      </TouchableOpacity>

      {/* Modal */}
      <Modal
        statusBarTranslucent={true}
        navigationBarTranslucent={true}
        visible={visible}
        transparent
        animationType="none"
        onRequestClose={() => setVisible(false)}
      >
        {/* Background tap closes */}
        <TouchableOpacity
          activeOpacity={1}
          style={styles.backdrop}
          onPress={() => setVisible(false)}
        >
          {/* Modal box (stops propagation so it doesn't close) */}
          <TouchableOpacity activeOpacity={1} style={styles.box}>
            <Text style={styles.title}>Hello from modal</Text>

            <TouchableOpacity
              style={styles.closeBtn}
              onPress={() => setVisible(false)}
            >
              <Text style={styles.closeText}>Close</Text>
            </TouchableOpacity>
          </TouchableOpacity>
        </TouchableOpacity>
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },

  openBtn: {
    backgroundColor: "black",
    paddingVertical: 12,
    paddingHorizontal: 20,
    borderRadius: 8,
  },
  openText: {
    color: "#fff",
    fontSize: 16,
  },

  backdrop: {
    flex: 1,
    backgroundColor: "rgba(0,0,0,0.4)",
    justifyContent: "center",
    alignItems: "center",
  },

  box: {
    width: 260,
    backgroundColor: "#fff",
    padding: 24,
    borderRadius: 12,
  },
  title: {
    fontSize: 18,
    marginBottom: 16,
    textAlign: "center",
  },

  closeBtn: {
    marginTop: 10,
    backgroundColor: "black",
    paddingVertical: 10,
    borderRadius: 6,
    alignItems: "center",
  },
  closeText: {
    color: "#fff",
    fontSize: 16,
  },
});