[Regression] RN 0.76 stretches Modal to full screen on Android API < 30 if edge-to-edge mode is enabled

[kirillzyusko]

Description

If edge-to-edge mode is enabled for the app:

WindowCompat.setDecorFitsSystemWindows(this.window, false)

And Modal is shown, then we have a different behavior (see steps for reproduction and screenshots section).

Prior to RN 0.75 we had a consistent behavior and content was always shown above the navigation bar (independently from MainActivity configuration). I hope to get this consistent behavior in RN 0.76 as well. If we want to customize navigation bar behavior (and draw a content behind them) we can take a power of this PR: #47254

So keeping all information above in the head I tend to think that this is a regression 🙂

Steps to reproduce

1. Run reproduction example on API 29
2. Click on "Show modal" button
3. Check that content goes beyond navigation bar
4. Run reproduction example on API 30
5. Click on "Show modal" button
6. Check that the content is shown above the navigation bar

React Native Version

0.76.1

Affected Platforms

Runtime - Android

Output of npx react-native info

System:
  OS: macOS 14.6.1
  CPU: (10) arm64 Apple M1 Pro
  Memory: 148.58 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.14.0
    path: ~/.nvm/versions/node/v20.14.0/bin/node
  Yarn:
    version: 1.22.22
    path: ~/.nvm/versions/node/v20.14.0/bin/yarn
  npm:
    version: 10.7.0
    path: ~/.nvm/versions/node/v20.14.0/bin/npm
  Watchman:
    version: 2024.10.21.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.14.3
    path: /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.0
      - iOS 18.0
      - macOS 15.0
      - tvOS 18.0
      - visionOS 2.0
      - watchOS 11.0
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.2 AI-242.23339.11.2421.12483815
  Xcode:
    version: 16.0/16A242d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.9
    path: /usr/bin/javac
  Ruby:
    version: 2.7.6
    path: /Users/kirylziusko/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.0
    wanted: 15.0.0
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.1
    wanted: 0.76.1
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: false

Stacktrace or Logs

There is no stacktrace (since it's not a crash). But let me know if you need any kind of logs.

Reproducer

https://github.com/kirillzyusko/react-native-modal-edge-to-edge-issue

Screenshots and Videos

API 29	API 30

[react-native-bot]

⚠️

Newer Version of React Native is Available!

ℹ️

You are on a supported minor version, but it looks like there's a newer patch available - 0.76.1. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[react-native-bot]

⚠️

Newer Version of React Native is Available!

ℹ️

You are on a supported minor version, but it looks like there's a newer patch available - undefined. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[JacksonHonoro]

I had a problem with react native modal after version 0.76.x. My modal without absolute position inside a view with flex: 1 was very displaced and even adjusting the layout the buttons inside it did not work... What solved this problem was I went to the android/gradle.properties file and disabled the new architecture (newArchEnabled=false), after that the modal behaved correctly.

Then run:

yarn start --reset-cache
yarn android

[alanleedev]

@JacksonHonoro Could you provide screenshots and Reproducer ?

[alanleedev]

@kirillzyusko Could we close this or was there anything that still needs to be looked into?

[kirillzyusko]

@alanleedev yes, I believe it can be closed. I think this bug still can be reproduced if you use a different value of statusBarTranslucent (comparing to my example project). But I also think this bug can be fixed with addition of a new property called navigationBarTranslucent, so yes, let's close that issue!