Skip to content

Redesign paused in debugger overlay (iOS) - #58950

Draft
huntie wants to merge 1 commit into
pr58867from
pr58950
Draft

huntie wants to merge 1 commit into
pr58867from
pr58950

Conversation

@huntie

@huntie huntie commented Oct 8, 2026 •

Copy link
Copy Markdown
Collaborator

Summary

Context

Continued review of built-in dev UI controls for iPhone Duo / wider screen devices.

Follows #58866.

Design changes

Redesign the "Paused in Debugger" overlay.

  • Redesigned yellow pill control with a pause icon and "Tap to resume" over the dimmed app. Aligns with (and reuses) the floating design of the dev loading banner.
  • Fix: Stack the paused banner above a loading banner while both are visible, with the loading banner left readable and tappable above the dimming. In practice this only happens alongside the disconnected banner.
  • Improved UX for non-coders: Now displays "App paused in debugger", and "Tap to resume".

Notes

  • The capsule, its window, placement and animations move out of the RCTDevLoadingView module into RCTDevBanner, a plain class in the same pod, which the module now owns. The paused overlay is an RCTPausedInDebuggerBanner subclass that overrides its hooks: window level, dimming, stack level, height, insets, the leading icon, the two-line text and the tap. The module's API is unchanged.
  • Move RCTPausedInDebuggerOverlayController into React-CoreModules so it can reach RCTDevBanner. Its only caller, RCTHost, already depends on that pod.
Before After

Changelog:
[iOS][Changed] - Paused in debugger overlay: Redesign as a floating capsule

Test Plan

  • ✅ On the iPhone 18 Pro simulator, Debugger.pause from a scripted DevTools session shows the banner over the dimmed app, and tapping it sends Debugger.resumed and hides it.
  • ✅ While paused, a tap on the app content stops at the dimming view, and the disconnected banner's dismiss button above it still takes the touch and dismisses it.
  • ✅ With the disconnected banner shown, the paused banner stays on top and the disconnected banner sits 12pt below it.

Paused, iPhone 18 Pro

Light Dark

Edge case: Paused with the disconnected banner

Light Dark
  • ✅ Now stacks both indicators
    • Note: Fast Refresh/Loading will never clash with Paused in Debugger. The only theoretical stack is Paused + Disconnected from dev server.
  • ✅ Dismiss button on disconnected banner still receives tap

@huntie
huntie changed the base branch from main to pr58867 October 8, 2026 12:34
@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 Oct 8, 2026
@huntie
huntie added this pull request to stack #58868 October 8, 2026 12:35
@github-actions

github-actions Bot commented Oct 8, 2026

Copy link
Copy Markdown

Caution

Invalid Base Branch

The base branch for this PR is pr58867, which is not main or a -stable branch.
Are you sure you want to target this branch?

This branch has not been deployed

No deployments
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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant