Skip to content

Prevent iOS Alert and Modal from rendering in the top-left corner#57251

Open
zoontek wants to merge 2 commits into
react:mainfrom
zoontek:fix-top-lest-alerts-modals
Open

Prevent iOS Alert and Modal from rendering in the top-left corner#57251
zoontek wants to merge 2 commits into
react:mainfrom
zoontek:fix-top-lest-alerts-modals

Conversation

@zoontek

@zoontek zoontek commented Jun 17, 2026

Copy link
Copy Markdown
Contributor

Summary:

On iOS, both Alert and Modal could render in the top-left corner of the screen instead of filling it.

  • RCTAlertController: when the alert window is created from a UIWindowScene, it was initialized without a frame and defaulted to a zero-sized frame. We now set its frame to the scene's coordinate space bounds.
  • ModalHostViewUtils: ModalHostViewScreenSize used RCTScreenSize(), whose value is cached once via dispatch_once. If that first read happens before the screen is ready, it caches 0 and stays 0, so the modal renders zero-sized in the top-left corner. We now read RCTViewportSize() on the main queue, which reads the key window's bounds live.

Fixes #45453

Changelog:

[IOS] [FIXED] - Prevent Alert and Modal from rendering in the top-left corner

Test Plan:

  • Open an Alert on iOS and confirm it is centered and correctly sized.
  • Open a Modal on iOS and confirm it fills the screen instead of appearing in the top-left corner.

Screenshots:

Alert Modal

@meta-cla meta-cla Bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Jun 17, 2026
@zoontek zoontek changed the title Fix top lest alerts modals fix: prevent iOS Alert and Modal from rendering in the top-left corner Jun 17, 2026
@zoontek zoontek changed the title fix: prevent iOS Alert and Modal from rendering in the top-left corner Prevent iOS Alert and Modal from rendering in the top-left corner Jun 17, 2026
@facebook-github-tools facebook-github-tools Bot added the Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. label Jun 17, 2026
@cortinico

Copy link
Copy Markdown
Contributor

I never saw this happening tbf. Is this happening consisntely @zoontek ?

@zoontek

zoontek commented Jun 17, 2026

Copy link
Copy Markdown
Contributor Author

@cortinico No, it's not consistent. It's a timing/race so it's hard to reproduce on demand, but I've hit it myself and got reports from users too (also, see #45453).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. p: Expo Partner: Expo Partner Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

RN Alert button sometimes renders in the upper-left corner of the screen (iOS)

2 participants