Skip to content

Redesign paused in debugger overlay (iOS) - #58950

Open
huntie wants to merge 1 commit into
pr58867from
pr58950
Open

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?

@huntie
huntie marked this pull request as ready for review October 15, 2026 12:19
@huntie
huntie requested review from motiz88 and vzaidman October 15, 2026 12:19
@vzaidman
vzaidman requested a review from cipolleschi October 15, 2026 12:46
meta-codesync Bot pushed a commit that referenced this pull request Oct 21, 2026
Summary:
The `analyze_pr` check fails every PR in a stack above the first (example: #58867), since each targets the branch of the PR below it rather than `main` or a `-stable` branch.

- Pass the branch target check when the base branch is the head of another open PR in the repo.
- Other base branches still fail as before, and the parent PR's own check still guards its target.

NOTE: The workflow runs on `pull_request_target` from `main`, so this takes effect only after it lands.

Changelog: [Internal]

Pull Request resolved: #59109

Test Plan:
```
yarn jest .github/workflow-scripts/__tests__/checkBranchTarget-test.js
```

Checked the lookup the workflow makes against GitHub:

```
gh api 'repos/react/react-native/pulls?state=open&head=react:pr58950'
```

✅ Returns #58950, so #58951 (based on `pr58950`) will pass.
ℹ️ A non-PR branch returns no results and still fails.

Reviewed By: christophpurrer

Differential Revision: D125867260

Pulled By: Abbondanzo

fbshipit-source-id: e30b4768525f5c4938e782231b9b9fc435953f42

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.

2 participants