Navigation bar ignoring the navigationBarTranslucent prop / Modal doesn't cover the navigation bar

[DragomirAndrei19]

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

React Native 0.81.5, New Architecture (Paper)

The default/core Modal component from react native doesn't cover the navigation bar even when navigationBarTranslucent prop is enabled.

This used to work in react-native-edge-to-edge library.

I could see using the hidden as an alternative solution but it's not quite the same, as I'd still the navigation bar to be visible behind the modal.

I think I've seen in the past (for the edge-to-edge library) that react-native-screens has been cited as the potential cause of the problem. For the record, I'm using react-native-screens@4.18.0.

Library version

1.0.1

Environment info

System:
  OS: macOS 14.6.1
  CPU: (8) arm64 Apple M1 Pro
  Memory: 110.56 MB / 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

1. Use the default transparent behaviour of the navigation bar component (nothing added to android/app/src/main/res/values/styles.xml)
2. Add navigationBarTranslucent={true} and statusBarTranslucent={true} to a modal component (imported directly from React Native and not other library)
3. The modal doesn't cover the navigation bar

Reproducible sample code

import React, { useState } from 'react';
import { Modal } from 'react-native';

const MinimalModalExample = () => {
  const [visible, setVisible] = useState(true);

  return (
    <Modal
      transparent
      animationType="none"
      visible={visible}
      statusBarTranslucent
      navigationBarTranslucent
      onRequestClose={() => setVisible(false)}
    >
      {/* Minimal content here, removed for brevity */}
    </Modal>
  );
};

export default MinimalModalExample;

[zoontek]

That's (unfortunately) expected. The built-in StatusBar, NavigationBar or even react-native-edge-to-edge SystemBars are not capable of updating the Modal window system bars style, as they evolve in a different window context on Android.

How does this (currently) work?

On Android, edge-to-edge is programatically applied to MainActivity. With react-native-edge-to-edge, there was the extra step with provided themes, allowing you to have a fully transparent navigation bar on all Window instances (including Modal).

Thing is, system bars style can't be updated once the Modal (Dialog) instance is created, they are synced with the MainActivity one (more infos about this mechanism here: zoontek/react-native-edge-to-edge#98)

By switching to edgeToEdgeEnabled, edge-to-edge is only applied programatically (no theme), and Modal just have statusBarTranslucent / navigationBarTranslucent enforced to true (it's translucent! Just 50% opacity black or 90% opacity white - similar to Android defaults)

How to "fix" it?

👉 You can copy one of the react-native-edge-to-edge android theme in your codebase
👉 I actually plan to fix the issue upstream, and make StatusBar (and NavigationBar) works in React Native Modal, not just synced at Modal creation, but in realtime. This will also fix the bar styles race condition.

[DragomirAndrei19]

@zoontek

Thanks for the detailed answer, it makes perfect sense.

After checking again, the navigation bar really is about 10% transparent, which still looks fully white to most people.

I’ll probably wait for the upstream fix and stay on react-native-edge-to-edge for now as one of my apps is full of such modal components. I was a bit worried the library would be deprecated quickly in favor of edgeToEdgeEnabled=true, but it still feels cleaner to remove later than copying a custom theme I might forget about.

Thank you, patiently waiting for the upstream fix 🙂