Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
kirillzyusko opened this issue Oct 30, 2024 · 2 comments
Open

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

kirillzyusko opened this issue Oct 30, 2024 · 2 comments
Assignees
@alanleedev
Labels
0.76 Component: Modal Impact: Regression Describes a behavior that used to work on a prior release, but stopped working recently. Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. Newer Patch Available Platform: Android Android applications. Resolution: PR Submitted A pull request with a fix has been provided.

Comments

@kirillzyusko
Copy link

kirillzyusko commented Oct 30, 2024 •
edited
Loading

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
image image
@react-native-bot
Copy link
Collaborator

⚠️ 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 react-native-bot added Component: Modal Impact: Regression Describes a behavior that used to work on a prior release, but stopped working recently. Platform: Android Android applications. labels Oct 30, 2024
@react-native-bot
Copy link
Collaborator

⚠️ 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.

@kirillzyusko kirillzyusko mentioned this issue Oct 30, 2024
Draft
2 tasks
@alanleedev alanleedev self-assigned this Oct 30, 2024
@cortinico cortinico added 0.76 Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. and removed Needs: Triage 🔍 labels Oct 30, 2024
@alanleedev alanleedev mentioned this issue Oct 31, 2024
Closed
alanleedev added a commit to alanleedev/react-native that referenced this issue Oct 31, 2024
@alanleedev @facebook-github-bot
fix Modal content being cut off when Activity is edge-to-edge
2fe8c0e 
Summary:
Fixing issue raised in facebook#47307

This is a follow up from D62286026.
It appears there was a line that went missing while trying to refactor the code.

`fitsSystemWindows = true` is needeod for < API 30 to avoid content rendering under the system bars when Modal is shown with Activity that is edge-to-edge.

Differential Revision: D65280014
alanleedev added a commit to alanleedev/react-native that referenced this issue Oct 31, 2024
@alanleedev @facebook-github-bot
fix Modal content being cut off when Activity is edge-to-edge
2035cd4 
Summary:
Fixing issue raised in facebook#47307

This is a follow up from D62286026.
It appears there was a line that went missing while trying to refactor the code.

`fitsSystemWindows = true` is needeod for < API 30 to avoid content rendering under the system bars when Modal is shown with Activity that is edge-to-edge.

Changelog:
[Android][Fixed] Fix Regression - Modal content rendering below system bar on < API 30 when activity is edge-to-edge

Differential Revision: D65280014
alanleedev added a commit to alanleedev/react-native that referenced this issue Nov 1, 2024
@alanleedev @facebook-github-bot
fix Modal content being cut off when Android Activity is edge-to-edge (…
2fa5b89 
…facebook#47339)

Summary:

Fixing issue raised in facebook#47307

This is a follow up from D62286026.
It appears there was a line that went missing while trying to refactor the code.

`fitsSystemWindows = true` is needeod for < API 30 to avoid content rendering under the system bars when Modal is shown with Activity that is edge-to-edge.

Changelog:
[Android][Fixed] Fix Regression - Modal content rendering below system bar on < API 30 when activity is edge-to-edge

Reviewed By: cortinico

Differential Revision: D65280014
facebook-github-bot pushed a commit that referenced this issue Nov 1, 2024
@alanleedev @facebook-github-bot
fix Modal content being cut off when Android Activity is edge-to-edge (…
2cd48ef 
…#47339)

Summary:
Pull Request resolved: #47339

Fixing issue raised in #47307

This is a follow up from D62286026.
It appears there was a line that went missing while trying to refactor the code.

`fitsSystemWindows = true` is needeod for < API 30 to avoid content rendering under the system bars when Modal is shown with Activity that is edge-to-edge.

Changelog:
[Android][Fixed] Fix Regression - Modal content rendering below system bar on < API 30 when activity is edge-to-edge

Reviewed By: cortinico

Differential Revision: D65280014

fbshipit-source-id: 616ff739be55635f1295ef3bf8b997a27ef769ae
@alanleedev alanleedev mentioned this issue Nov 1, 2024
Open
@migueldaipre migueldaipre added the Resolution: PR Submitted A pull request with a fix has been provided. label Nov 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@alanleedev alanleedev

Labels
0.76 Component: Modal Impact: Regression Describes a behavior that used to work on a prior release, but stopped working recently. Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. Newer Patch Available Platform: Android Android applications. Resolution: PR Submitted A pull request with a fix has been provided.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@cortinico @migueldaipre @kirillzyusko @react-native-bot @alanleedev