Redesign paused in debugger overlay (iOS)

Author: huntie

packages/react-native/React/Base/RCTBridge.mm

@@ -25,7 +25,6 @@
 #import "RCTJSThread.h"
 #import "RCTLog.h"
 #import "RCTModuleData.h"
-#import "RCTPausedInDebuggerOverlayController.h"
 #import "RCTPerformanceLogger.h"
 #import "RCTProfile.h"
 #import "RCTReloadCommand.h"

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

@@ -9,4 +9,15 @@
 #import <React/RCTDevLoadingViewProtocol.h>
 
 @interface RCTDevLoadingView : NSObject <RCTDevLoadingViewProtocol, RCTBridgeModule>
+
+/**
+ * Shows the banner in its paused-in-debugger state: a capsule with a leading pause icon and a "Tap to resume" line,
+ * over a dimmed app that takes no touches, with a tap on the banner calling `onResume`. The banner stays until
+ * `hidePausedInDebuggerMessage`, and a loading banner stacks below it while both are visible. Unlike the loading
+ * messages, this state ignores `RCTDevLoadingViewSetEnabled`. Meant for a dedicated instance, kept apart from the
+ * module's own.
+ */
+- (void)showPausedInDebuggerMessage:(NSString *)message onResume:(dispatch_block_t)onResume;
+- (void)hidePausedInDebuggerMessage;
+
 @end

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

@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#import "RCTPausedInDebuggerOverlayController.h"
+
+#import <React/RCTDevLoadingView.h>
+
+// The debugger frontend sends a generic message with each pause; the banner shows React Native's own wording, which
+// also tells someone who is not debugging what happened to the app.
+static NSString *const RCTPausedInDebuggerMessage = @"App paused in debugger";
+
+@implementation RCTPausedInDebuggerOverlayController {
+  // A dedicated banner, so the paused state neither replaces nor is replaced by the module's loading messages.
+  RCTDevLoadingView *_banner;
+}
+
+- (void)showWithMessage:(__unused NSString *)message onResume:(void (^)(void))onResume
+{
+  if (_banner == nil) {
+    _banner = [RCTDevLoadingView new];
+  }
+  [_banner showPausedInDebuggerMessage:RCTPausedInDebuggerMessage onResume:onResume];
+}
+
+- (void)hide
+{
+  [_banner hidePausedInDebuggerMessage];
+}
+
+@end

…t/RCTPausedInDebuggerOverlayController.h …s/RCTPausedInDebuggerOverlayController.hpackages/react-native/React/DevSupport/RCTPausedInDebuggerOverlayController.h renamed to packages/react-native/React/CoreModules/RCTPausedInDebuggerOverlayController.h packages/react-native/React/DevSupport/RCTPausedInDebuggerOverlayController.h renamed to packages/react-native/React/CoreModules/RCTPausedInDebuggerOverlayController.h

@@ -944,6 +944,8 @@ interface RCTDefaultReactNativeFactoryDelegate : public UIResponder <RCTReactNat
 }
 
 interface RCTDevLoadingView : public NSObject <RCTDevLoadingViewProtocol, RCTBridgeModule> {
+  public virtual void hidePausedInDebuggerMessage();
+  public virtual void showPausedInDebuggerMessage:onResume:(NSString* message, dispatch_block_t onResume);
 }
 
 interface RCTDevMenu : public NSObject {

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

@@ -953,6 +953,8 @@ interface RCTDefaultReactNativeFactoryDelegate : public UIResponder <RCTReactNat
 }
 
 interface RCTDevLoadingView : public NSObject <RCTDevLoadingViewProtocol, RCTBridgeModule> {
+  public virtual void hidePausedInDebuggerMessage();
+  public virtual void showPausedInDebuggerMessage:onResume:(NSString* message, dispatch_block_t onResume);
 }
 
 interface RCTDevMenu : public NSObject {

packages/react-native/React/DevSupport/RCTPausedInDebuggerOverlayController.mm

@@ -944,6 +944,8 @@ interface RCTDefaultReactNativeFactoryDelegate : public UIResponder <RCTReactNat
 }
 
 interface RCTDevLoadingView : public NSObject <RCTDevLoadingViewProtocol, RCTBridgeModule> {
+  public virtual void hidePausedInDebuggerMessage();
+  public virtual void showPausedInDebuggerMessage:onResume:(NSString* message, dispatch_block_t onResume);
 }
 
 interface RCTDevMenu : public NSObject {

scripts/cxx-api/api-snapshots/ReactAppleDebugCxx.api

@@ -944,6 +944,8 @@ interface RCTDefaultReactNativeFactoryDelegate : public UIResponder <RCTReactNat
 }
 
 interface RCTDevLoadingView : public NSObject <RCTDevLoadingViewProtocol, RCTBridgeModule> {
+  public virtual void hidePausedInDebuggerMessage();
+  public virtual void showPausedInDebuggerMessage:onResume:(NSString* message, dispatch_block_t onResume);
 }
 
 interface RCTDevMenu : public NSObject {