chore(android-new-arch): reproduce modal layout issues #50704
Closed
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
facebook-github-bot
added
the
CLA Signed
|
AndreiCalazans
changed the title
AndreiCalazans
changed the title
AndreiCalazans
changed the title
|
@AndreiCalazans can you send this against Also could you edit the |
AndreiCalazans
force-pushed
the
andrei/reproduce-modal-issue-new-arch
branch
from
e5f8f7c to
de31b10
Compare
|
@cortinico sure. updated base to main and moved code to playground instead. |
|
Thanks for the repro @AndreiCalazans We're investigating this. I'll get back to you sometime next week |
cortinico
added a commit
to cortinico/react-native
that referenced
this pull request
May 1, 2025
Summary: Fixes facebook#50442 Closes facebook#50704 Users reported that Modals on Android are first renderer anchored in 0,0. That results in them being on the top left corner of the screen for some seconds. This is happening because the native state of the Modal on Android as width/height set at 0,0 - which we then update in a subsequent callback. I'm fixing this by making sure we render the Modal the first time with the right screen size - the status bar size Changelog: [Android] [Fixed] - Fix Modal first frame being rendered on top-left corner Differential Revision: D73948178
cortinico
added a commit
to cortinico/react-native
that referenced
this pull request
May 1, 2025
Summary: Fixes facebook#50442 Closes facebook#50704 Users reported that Modals on Android are first renderer anchored in 0,0. That results in them being on the top left corner of the screen for some seconds. This is happening because the native state of the Modal on Android as width/height set at 0,0 - which we then update in a subsequent callback. I'm fixing this by making sure we render the Modal the first time with the right screen size - the status bar size Changelog: [Android] [Fixed] - Fix Modal first frame being rendered on top-left corner Differential Revision: D73948178
cortinico
added a commit
to cortinico/react-native
that referenced
this pull request
May 1, 2025
Summary: Fixes facebook#50442 Closes facebook#50704 Users reported that Modals on Android are first renderer anchored in 0,0. That results in them being on the top left corner of the screen for some seconds. This is happening because the native state of the Modal on Android as width/height set at 0,0 - which we then update in a subsequent callback. I'm fixing this by making sure we render the Modal the first time with the right screen size - the status bar size Changelog: [Android] [Fixed] - Fix Modal first frame being rendered on top-left corner Differential Revision: D73948178
cortinico
added a commit
to cortinico/react-native
that referenced
this pull request
May 1, 2025
Summary: Pull Request resolved: facebook#51048 Fixes facebook#50442 Closes facebook#50704 Users reported that Modals on Android are first renderer anchored in 0,0. That results in them being on the top left corner of the screen for some seconds. This is happening because the native state of the Modal on Android as width/height set at 0,0 - which we then update in a subsequent callback. I'm fixing this by making sure we render the Modal the first time with the right screen size - the status bar size Changelog: [Android] [Fixed] - Fix Modal first frame being rendered on top-left corner Differential Revision: D73948178
cortinico
added a commit
to cortinico/react-native
that referenced
this pull request
May 2, 2025
Summary: Fixes facebook#50442 Closes facebook#50704 Users reported that Modals on Android are first renderer anchored in 0,0. That results in them being on the top left corner of the screen for some seconds. This is happening because the native state of the Modal on Android as width/height set at 0,0 - which we then update in a subsequent callback. I'm fixing this by making sure we render the Modal the first time with the right screen size - the status bar size Changelog: [Android] [Fixed] - Fix Modal first frame being rendered on top-left corner Differential Revision: D73948178
cortinico
added a commit
to cortinico/react-native
that referenced
this pull request
Jun 17, 2025
Summary: Pull Request resolved: facebook#51048 Fixes facebook#50442 Closes facebook#50704 Users reported that Modals on Android are first renderer anchored in 0,0. That results in them being on the top left corner of the screen for some seconds. This is happening because the native state of the Modal on Android as width/height set at 0,0 - which we then update in a subsequent callback. I'm fixing this by making sure we render the Modal the first time with the right screen size - the status bar size Changelog: [Android] [Fixed] - Fix Modal first frame being rendered on top-left corner Differential Revision: D73948178
cortinico
added a commit
to cortinico/react-native
that referenced
this pull request
Jun 18, 2025
Summary: Pull Request resolved: facebook#51048 Fixes facebook#50442 Closes facebook#50704 Users reported that Modals on Android are first renderer anchored in 0,0. That results in them being on the top left corner of the screen for some seconds. This is happening because the native state of the Modal on Android as width/height set at 0,0 - which we then update in a subsequent callback. I'm fixing this by making sure we render the Modal the first time with the right screen size - the status bar size Changelog: [Android] [Fixed] - Fix Modal first frame being rendered on top-left corner Reviewed By: javache Differential Revision: D73948178
cortinico
added a commit
to cortinico/react-native
that referenced
this pull request
Jun 18, 2025
Summary: Pull Request resolved: facebook#51048 Fixes facebook#50442 Closes facebook#50704 Users reported that Modals on Android are first renderer anchored in 0,0. That results in them being on the top left corner of the screen for some seconds. This is happening because the native state of the Modal on Android as width/height set at 0,0 - which we then update in a subsequent callback. I'm fixing this by making sure we render the Modal the first time with the right screen size - the status bar size Changelog: [Android] [Fixed] - Fix Modal first frame being rendered on top-left corner Reviewed By: javache Differential Revision: D73948178
cortinico
added a commit
to cortinico/react-native
that referenced
this pull request
Jun 19, 2025
Summary: Fixes facebook#50442 Closes facebook#50704 Users reported that Modals on Android are first renderer anchored in 0,0. That results in them being on the top left corner of the screen for some seconds. This is happening because the native state of the Modal on Android as width/height set at 0,0 - which we then update in a subsequent callback. I'm fixing this by making sure we render the Modal the first time with the right screen size - the status bar size Changelog: [Android] [Fixed] - Fix Modal first frame being rendered on top-left corner Reviewed By: javache Differential Revision: D73948178
cortinico
added a commit
to cortinico/react-native
that referenced
this pull request
Jun 19, 2025
Summary: Pull Request resolved: facebook#51048 Fixes facebook#50442 Closes facebook#50704 Users reported that Modals on Android are first renderer anchored in 0,0. That results in them being on the top left corner of the screen for some seconds. This is happening because the native state of the Modal on Android as width/height set at 0,0 - which we then update in a subsequent callback. I'm fixing this by making sure we render the Modal the first time with the right screen size - the status bar size Changelog: [Android] [Fixed] - Fix Modal first frame being rendered on top-left corner Reviewed By: javache Differential Revision: D73948178
facebook-github-bot
pushed a commit
that referenced
this pull request
Jun 19, 2025
Summary: Pull Request resolved: #51048 Fixes #50442 Closes #50704 Users reported that Modals on Android are first renderer anchored in 0,0. That results in them being on the top left corner of the screen for some seconds. This is happening because the native state of the Modal on Android as width/height set at 0,0 - which we then update in a subsequent callback. I'm fixing this by making sure we render the Modal the first time with the right screen size - the status bar size Changelog: [Android] [Fixed] - Fix Modal first frame being rendered on top-left corner Reviewed By: javache Differential Revision: D73948178 fbshipit-source-id: 055c12aa62d70acc1e4c5a2a5c4ea0c5608e22c7
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary:
See #50442
Note: this reproducible patch was made on top of 0.76 stable branch however this is reproducible on latest main.
We are experiencing an issue with Modals on Android when the new architecture is enabled.
When trying to render a modal, especially in a busy JS thread on Android, the rendered UI does not match expected layout. This either causes a layout glitch, where the Modal content flashes an incorrect layout, or a Modal's inner content layout fully broken (see image below).
In this example below, we were mounting then unmounting a few Modals in sequence and eventually (inconsistently happening) the app gets into a frozen state where no user input gets through the app anymore. When inspecting the UI layout on Android Studio it shows that Android's Dialog is rendered as expected fully covering the UI however its children content has incorrect width values:
When we attempt to reproduce this issue in rn-tester we couldn't exactly replicate the frozen UI state however we can see replicate the incorect layout issues occuring when in a busy thread:
Video of the incorrect layout rendered on Android with new architecture enabled.
Same experience without new arch enabled on Android - has o glitch despite very busy JS thread.
There seems to be a shared theme here with onLayout returning empty layout dimensions during first mount which others have observed that this also breaks layout animations from Reanimated.
Other observations. If we wrap the Modal's children with a View that has fixed width and height we do see the entire content properly rendered however the touch system is broken and the children is unable to receive presses.
Changelog:
Test Plan: