Redesign DevLoadingView (iOS)

[huntie]

Summary

The dev loading banner spans the full width under the status bar. On iPhone Duo it collides with the rail and camera cutout, and it straddles the hinge when the device is partly folded.

On top of wider out-of-tree platform support since it was created (desktop, iPad, visionOS and more), this UI component was due a visual refresh.

Before	After

This diff

Redesigns <DevLoadingView> as a floating pill at the center-top of the screen.

Key changes:

• New shape, rendered as Liquid Glass on iOS 26+, a solid fill below.
• Passes touches outside the capsule through to the app.
• More subtle scale and fade animation (same timings as before).

iPhone Duo platform nuances:

• Handles left/right safe area (when needed) on iPhone Duo.
• Handles iPhone Duo Preferred Placement: moves into the left panel when the hinge settles partly open.
• Device specific centring, and safe area tweaks for various poses (see Test Plan).

Why so much attention?

These updates + details help reinforce that React Native is maintained and high quality, and supports the iOS platform completely. Delighting the user (e.g. avoiding the iPhone Duo hinge like other system elements) is a goal.

Changelog:
[iOS][Changed] - Dev loading banner: Redesign in-app Loading/Fast Refresh banner

Test Plan

cd packages/rn-tester
bundle exec pod install
xcodebuild -workspace RNTesterPods.xcworkspace -scheme RNTester -configuration Debug -sdk iphonesimulator -destination 'generic/platform=iOS Simulator' build

App states, iPhone 18 Pro

Note: This is RNTester's non-native header — regular headers sit a bit lower and generally align a bit better with the loading view vertically.

	Light	Dark
Loading
Fast Refresh
Disconnected

Disconnected

(Largest existing variant, stays visible until dismissed)

iPhone 18 Pro	iPhone Duo, folded	iPhone Duo, unfolded	iPhone Duo, unfolded, portrait
	✅ Aligned system center (also applies in 2-app splits)

🎬 End to end app load, Fast Refresh

ios-pill-e2e-load-refresh-3.mov

🎬 Dynamic fold avoidance, iPhone Duo

Screen.Recording.2026-10-05.at.20.50.31.mov

• ✅ Folding moves the capsule into the left panel once the hinge settles, and unfolding recenters it.
• ⚠️ Not run: the solid fill below iOS 26, the path without hinge APIs below iOS 27.1, and Split View since the alert-matched centering.

[cipolleschi]

left some questions and nits

[cipolleschi]

what is this number?? it is oddly specific! xD
Also, safeAreaInsets.left - safeAreaInsets.right in most case will end up being 0... Problably only for the Duo it does return something that is not 0.

[huntie]

Tidied up in the latest push. This matches the UIKit placement algo better now I believe (or at least uses a 24px const!).

react-native/packages/react-native/React/CoreModules/RCTDevLoadingView.mm

Lines 59 to 61 in 51d10d0

	return (MIN(safeAreaInsets.left, RCTDevLoadingViewAlertMinimumMargin) -
	MIN(safeAreaInsets.right, RCTDevLoadingViewAlertMinimumMargin)) /
	2;

This supports system-matched placement of centred alerts.

[huntie]

Thanks Riccardo ❤️ Let me see how I can tidy those bits up :)

There's a fair amount of new positioning logic but I hope it's basically agent-maintainable in this age. Basically commented sections / encapsulated in the Duo-related preprocessor flag blocks where we progressively enhance.

Will probably reuse this logic too for an equivalent touch-up to the Paused Debugger overlay.