Fix LogBox notification toasts on iPhone Duo

Author: huntie

packages/react-native/Libraries/LogBox/LogBoxNotificationContainer.js

@@ -111,15 +111,21 @@ export function LogBoxNotificationContainer(props: Props): React.Node {
 
 const styles = StyleSheet.create({
   list: {
-    bottom: 20,
+    alignItems: 'center',
+    bottom: 16,
+    gap: 5,
     left: 10,
     right: 10,
+    // The container spans the width of the screen, so it passes touches outside the toasts through to the app, such
+    // as to a tab bar beside them.
+    pointerEvents: 'box-none',
     position: 'absolute',
   },
   toast: {
-    borderRadius: 8,
-    marginBottom: 5,
+    borderRadius: 12,
+    maxWidth: 600,
     overflow: 'hidden',
+    width: '100%',
   },
 });
 

packages/react-native/Libraries/LogBox/UI/LogBoxNotificationDismissButton.js

@@ -24,8 +24,8 @@ export default function LogBoxNotificationDismissButton(props: {
       <LogBoxButton
         id={props.id}
         backgroundColor={{
-          default: LogBoxStyle.getTextColor(0.3),
-          pressed: LogBoxStyle.getTextColor(0.5),
+          default: LogBoxStyle.getTextColor(0.15),
+          pressed: LogBoxStyle.getTextColor(0.3),
         }}
         hitSlop={{
           top: 12,
@@ -64,6 +64,6 @@ const styles = StyleSheet.create({
   image: {
     height: 8,
     width: 8,
-    tintColor: LogBoxStyle.getBackgroundColor(1),
+    tintColor: LogBoxStyle.getTextColor(0.8),
   },
 });

packages/react-native/Libraries/LogBox/__tests__/__snapshots__/LogBoxNotificationContainer-test.js.snap

@@ -4,8 +4,11 @@ exports[`LogBoxNotificationContainer should render both an error and warning not
 <SafeAreaView
   style={
     Object {
-      "bottom": 20,
+      "alignItems": "center",
+      "bottom": 16,
+      "gap": 5,
       "left": 10,
+      "pointerEvents": "box-none",
       "position": "absolute",
       "right": 10,
     }
@@ -14,9 +17,10 @@ exports[`LogBoxNotificationContainer should render both an error and warning not
   <View
     style={
       Object {
-        "borderRadius": 8,
-        "marginBottom": 5,
+        "borderRadius": 12,
+        "maxWidth": 600,
         "overflow": "hidden",
+        "width": "100%",
       }
     }
   >
@@ -59,9 +63,10 @@ exports[`LogBoxNotificationContainer should render both an error and warning not
   <View
     style={
       Object {
-        "borderRadius": 8,
-        "marginBottom": 5,
+        "borderRadius": 12,
+        "maxWidth": 600,
         "overflow": "hidden",
+        "width": "100%",
       }
     }
   >
@@ -116,8 +121,11 @@ exports[`LogBoxNotificationContainer should render the latest error notification
 <SafeAreaView
   style={
     Object {
-      "bottom": 20,
+      "alignItems": "center",
+      "bottom": 16,
+      "gap": 5,
       "left": 10,
+      "pointerEvents": "box-none",
       "position": "absolute",
       "right": 10,
     }
@@ -126,9 +134,10 @@ exports[`LogBoxNotificationContainer should render the latest error notification
   <View
     style={
       Object {
-        "borderRadius": 8,
-        "marginBottom": 5,
+        "borderRadius": 12,
+        "maxWidth": 600,
         "overflow": "hidden",
+        "width": "100%",
       }
     }
   >
@@ -175,8 +184,11 @@ exports[`LogBoxNotificationContainer should render the latest warning notificati
 <SafeAreaView
   style={
     Object {
-      "bottom": 20,
+      "alignItems": "center",
+      "bottom": 16,
+      "gap": 5,
       "left": 10,
+      "pointerEvents": "box-none",
       "position": "absolute",
       "right": 10,
     }
@@ -185,9 +197,10 @@ exports[`LogBoxNotificationContainer should render the latest warning notificati
   <View
     style={
       Object {
-        "borderRadius": 8,
-        "marginBottom": 5,
+        "borderRadius": 12,
+        "maxWidth": 600,
         "overflow": "hidden",
+        "width": "100%",
       }
     }
   >