Add LogBox-styled error overlay

Summary:
Replace the legacy red-on-black RedBox design with a LogBox-inspired design for RedBox 2.0: charcoal background, salmon header bar, structured call stack, 3-button footer, full-screen view with no animated transition. Gated behind `redBoxV2IOS`.

This diff is just for the low-hanging fruit - setting up the split implementation and borrowing the broad visual style of LogBox. Further up this stack we will port more functionality and improve on this baseline.

Changelog: [Internal]

Reviewed By: cipolleschi

Differential Revision: D98115368

Author: motiz88

packages/react-native/React/CoreModules/RCTRedBox+Internal.h

@@ -0,0 +1,36 @@
+/*
+ * 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 <React/RCTDefines.h>
+#import <UIKit/UIKit.h>
+
+#if RCT_DEV_MENU
+
+@class RCTJSStackFrame;
+
+@protocol RCTRedBoxControllerActionDelegate <NSObject>
+
+- (void)redBoxController:(UIViewController *)redBoxController openStackFrameInEditor:(RCTJSStackFrame *)stackFrame;
+- (void)reloadFromRedBoxController:(UIViewController *)redBoxController;
+- (void)loadExtraDataViewController;
+
+@end
+
+@protocol RCTRedBoxControlling <NSObject>
+
+@property (nonatomic, weak) id<RCTRedBoxControllerActionDelegate> actionDelegate;
+
+- (void)showErrorMessage:(NSString *)message
+               withStack:(NSArray<RCTJSStackFrame *> *)stack
+                isUpdate:(BOOL)isUpdate
+             errorCookie:(int)errorCookie;
+
+- (void)dismiss;
+
+@end
+
+#endif

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

@@ -16,8 +16,11 @@
 #import <React/RCTRedBoxExtraDataViewController.h>
 #import <React/RCTReloadCommand.h>
 #import <React/RCTUtils.h>
+#import <react/featureflags/ReactNativeFeatureFlags.h>
 
 #import "CoreModulesPlugins.h"
+#import "RCTRedBox+Internal.h"
+#import "RCTRedBox2Controller+Internal.h"
 #import "RCTRedBoxController+Internal.h"
 
 #if RCT_DEV_MENU
@@ -30,7 +33,7 @@ @interface RCTRedBox () <
 @end
 
 @implementation RCTRedBox {
-  RCTRedBoxController *_controller;
+  id<RCTRedBoxControlling> _controller;
   NSMutableArray<id<RCTErrorCustomizer>> *_errorCustomizers;
   RCTRedBoxExtraDataViewController *_extraDataViewController;
   NSMutableArray<NSString *> *_customButtonTitles;
@@ -178,14 +181,20 @@ - (void)showErrorMessage:(NSString *)message
     [[self->_moduleRegistry moduleForName:"EventDispatcher"] sendDeviceEventWithName:@"collectRedBoxExtraData"
                                                                                 body:nil];
 #pragma clang diagnostic pop
-    if (!self->_controller) {
-      self->_controller = [[RCTRedBoxController alloc] initWithCustomButtonTitles:self->_customButtonTitles
-                                                             customButtonHandlers:self->_customButtonHandlers];
-      self->_controller.actionDelegate = self;
-    }
 
     RCTErrorInfo *errorInfo = [[RCTErrorInfo alloc] initWithErrorMessage:message stack:stack];
     errorInfo = [self _customizeError:errorInfo];
+
+    if (self->_controller == nullptr) {
+      if (facebook::react::ReactNativeFeatureFlags::redBoxV2IOS()) {
+        self->_controller = [[RCTRedBox2Controller alloc] initWithCustomButtonTitles:self->_customButtonTitles
+                                                                customButtonHandlers:self->_customButtonHandlers];
+      } else {
+        self->_controller = [[RCTRedBoxController alloc] initWithCustomButtonTitles:self->_customButtonTitles
+                                                               customButtonHandlers:self->_customButtonHandlers];
+      }
+      self->_controller.actionDelegate = self;
+    }
     [self->_controller showErrorMessage:errorInfo.errorMessage
                               withStack:errorInfo.stack
                                isUpdate:isUpdate
@@ -196,9 +205,10 @@ - (void)showErrorMessage:(NSString *)message
 - (void)loadExtraDataViewController
 {
   dispatch_async(dispatch_get_main_queue(), ^{
+    UIViewController *controller = static_cast<UIViewController *>(self->_controller);
     // Make sure the CMD+E shortcut doesn't call this twice
-    if (self->_extraDataViewController != nil && ![self->_controller presentedViewController]) {
-      [self->_controller presentViewController:self->_extraDataViewController animated:YES completion:nil];
+    if (self->_extraDataViewController != nil && ([controller presentedViewController] == nullptr)) {
+      [controller presentViewController:self->_extraDataViewController animated:YES completion:nil];
     }
   });
 }
@@ -220,7 +230,7 @@ - (void)invalidate
   [self dismiss];
 }
 
-- (void)redBoxController:(__unused RCTRedBoxController *)redBoxController
+- (void)redBoxController:(__unused UIViewController *)redBoxController
     openStackFrameInEditor:(RCTJSStackFrame *)stackFrame
 {
   NSURL *const bundleURL = _overrideBundleURL ?: _bundleManager.bundleURL;
@@ -247,7 +257,7 @@ - (void)reload
   [self reloadFromRedBoxController:nil];
 }
 
-- (void)reloadFromRedBoxController:(__unused RCTRedBoxController *)redBoxController
+- (void)reloadFromRedBoxController:(__unused UIViewController *)redBoxController
 {
   if (_overrideReloadAction) {
     _overrideReloadAction();

packages/react-native/React/CoreModules/RCTRedBox2Controller+Internal.h

@@ -0,0 +1,31 @@
+/*
+ * 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 <React/RCTDefines.h>
+
+#import "RCTRedBox+Internal.h"
+
+#if RCT_DEV_MENU
+
+using RCTRedBox2ButtonPressHandler = void (^)(void);
+
+@interface RCTRedBox2Controller : UIViewController <RCTRedBoxControlling, UITableViewDelegate, UITableViewDataSource>
+
+@property (nonatomic, weak) id<RCTRedBoxControllerActionDelegate> actionDelegate;
+
+- (instancetype)initWithCustomButtonTitles:(NSArray<NSString *> *)customButtonTitles
+                      customButtonHandlers:(NSArray<RCTRedBox2ButtonPressHandler> *)customButtonHandlers;
+
+- (void)showErrorMessage:(NSString *)message
+               withStack:(NSArray<RCTJSStackFrame *> *)stack
+                isUpdate:(BOOL)isUpdate
+             errorCookie:(int)errorCookie;
+
+- (void)dismiss;
+@end
+
+#endif