From cdc9597e49cd5d1acd478cdf532dd8b3c9f118d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rub=C3=A9n=20Norte?= <rubennorte@meta.com>
Date: Tue, 10 Nov 2026 03:39:07 -0800
Subject: [PATCH] Refresh LogBox Fantom snapshots for SafeAreaView (#59893)

Summary:

Update the inspector, header and footer snapshots to reflect the current safe-area wrappers. The previous baselines describe the old structure, causing the same snapshot mismatches on repeated runs.

Correct the three-log header fixture and verify previous/next navigation, rather than duplicating the single-log case.

Changelog: [Internal] Update LogBox rendering tests.

Reviewed By: cortinico

Differential Revision: D130672828
---
 .../__tests__/LogBoxInspectorHeader-itest.js  |  16 +-
 .../LogBoxInspector-itest.js.snap             | 438 ++++++++++--------
 .../LogBoxInspectorFooter-itest.js.snap       | 297 +++++++-----
 .../LogBoxInspectorHeader-itest.js.snap       |  72 ++-
 4 files changed, 470 insertions(+), 353 deletions(-)

diff --git a/packages/react-native/Libraries/LogBox/UI/__tests__/LogBoxInspectorHeader-itest.js b/packages/react-native/Libraries/LogBox/UI/__tests__/LogBoxInspectorHeader-itest.js
index 17d10850fd2b..7b95ae6b0370 100644
--- a/packages/react-native/Libraries/LogBox/UI/__tests__/LogBoxInspectorHeader-itest.js
+++ b/packages/react-native/Libraries/LogBox/UI/__tests__/LogBoxInspectorHeader-itest.js
@@ -12,6 +12,7 @@ import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
 
 import LogBoxInspectorHeader from '../LogBoxInspectorHeader';
 import * as Fantom from '@react-native/fantom';
+import nullthrows from 'nullthrows';
 import * as React from 'react';
 
 describe('LogBoxInspectorHeader', () => {
@@ -49,18 +50,29 @@ describe('LogBoxInspectorHeader', () => {
 
   it('should render two buttons for three or more total', () => {
     const root = Fantom.createRoot();
+    const onSelectIndex = jest.fn();
     Fantom.runTask(() => {
       root.render(
         <LogBoxInspectorHeader
-          onSelectIndex={() => {}}
+          onSelectIndex={onSelectIndex}
           selectedIndex={0}
-          total={1}
+          total={3}
           level="warn"
         />,
       );
     });
 
     expect(root.getRenderedOutput().toJSX()).toMatchSnapshot();
+
+    Fantom.dispatchNativeEvent(
+      nullthrows(root.document.getElementById('logbox_header_button_prev')),
+      'click',
+    );
+    Fantom.dispatchNativeEvent(
+      nullthrows(root.document.getElementById('logbox_header_button_next')),
+      'click',
+    );
+    expect(onSelectIndex.mock.calls).toEqual([[2], [1]]);
   });
 
   it('should render syntax error header', () => {
diff --git a/packages/react-native/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspector-itest.js.snap b/packages/react-native/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspector-itest.js.snap
index f1fe5f55a826..a59895fb00fe 100644
--- a/packages/react-native/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspector-itest.js.snap
+++ b/packages/react-native/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspector-itest.js.snap
@@ -8,67 +8,69 @@ exports[`LogBoxInspector should render fatal with selectedIndex 2 1`] = `
 >
   <rn-view
     backgroundColor="rgba(243, 83, 105, 1)"
-  />
-  <rn-view
-    accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}"
-    accessible="true"
-    alignItems="center"
-    aspectRatio="1"
-    justifyContent="center"
-    marginBottom="-8"
-    marginLeft="6"
-    marginRight="6"
-    marginTop="5"
-    nativeID="logbox_header_button_prev"
-  >
-    <rn-image
-      height="14"
-      overflow="hidden"
-      source-scale="1"
-      source-size="{16, 28}"
-      source-type="local"
-      source-uri="file://drawable-mdpi/packages_reactnative_libraries_logbox_ui_logboximages_chevronleft.png"
-      tintColor="rgba(255, 255, 255, 1)"
-      width="8"
-    />
-  </rn-view>
-  <rn-paragraph
-    allowFontScaling="true"
-    ellipsizeMode="tail"
-    fontSize="16"
-    fontSizeMultiplier="NaN"
-    fontWeight="600"
-    foregroundColor="rgba(255, 255, 255, 1)"
-    includeFontPadding="false"
-    lineHeight="20"
-    maxFontSizeMultiplier="1.5"
-    nativeID="logbox_header_title_text"
-    overflow="hidden"
+    experimental_onSafeAreaInsetsChange="true"
   >
-    Log 3 of 3
-  </rn-paragraph>
-  <rn-view
-    accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}"
-    accessible="true"
-    alignItems="center"
-    aspectRatio="1"
-    justifyContent="center"
-    marginBottom="-8"
-    marginLeft="6"
-    marginRight="6"
-    marginTop="5"
-    nativeID="logbox_header_button_next"
-  >
-    <rn-image
-      height="14"
+    <rn-view
+      accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}"
+      accessible="true"
+      alignItems="center"
+      aspectRatio="1"
+      justifyContent="center"
+      marginBottom="-8"
+      marginLeft="6"
+      marginRight="6"
+      marginTop="5"
+      nativeID="logbox_header_button_prev"
+    >
+      <rn-image
+        height="14"
+        overflow="hidden"
+        source-scale="1"
+        source-size="{16, 28}"
+        source-type="local"
+        source-uri="file://drawable-mdpi/packages_reactnative_libraries_logbox_ui_logboximages_chevronleft.png"
+        tintColor="rgba(255, 255, 255, 1)"
+        width="8"
+      />
+    </rn-view>
+    <rn-paragraph
+      allowFontScaling="true"
+      ellipsizeMode="tail"
+      fontSize="16"
+      fontSizeMultiplier="NaN"
+      fontWeight="600"
+      foregroundColor="rgba(255, 255, 255, 1)"
+      includeFontPadding="false"
+      lineHeight="20"
+      maxFontSizeMultiplier="1.5"
+      nativeID="logbox_header_title_text"
       overflow="hidden"
-      source-scale="1"
-      source-size="{16, 28}"
-      source-type="local"
-      source-uri="file://drawable-mdpi/packages_reactnative_libraries_logbox_ui_logboximages_chevronright.png"
-      tintColor="rgba(255, 255, 255, 1)"
-      width="8"
-    />
+    >
+      Log 3 of 3
+    </rn-paragraph>
+    <rn-view
+      accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}"
+      accessible="true"
+      alignItems="center"
+      aspectRatio="1"
+      justifyContent="center"
+      marginBottom="-8"
+      marginLeft="6"
+      marginRight="6"
+      marginTop="5"
+      nativeID="logbox_header_button_next"
+    >
+      <rn-image
+        height="14"
+        overflow="hidden"
+        source-scale="1"
+        source-size="{16, 28}"
+        source-type="local"
+        source-uri="file://drawable-mdpi/packages_reactnative_libraries_logbox_ui_logboximages_chevronright.png"
+        tintColor="rgba(255, 255, 255, 1)"
+        width="8"
+      />
+    </rn-view>
   </rn-view>
   <rn-view
     backgroundColor="rgba(51, 51, 51, 1)"
@@ -130,58 +132,73 @@ exports[`LogBoxInspector should render fatal with selectedIndex 2 1`] = `
     flexDirection="row"
   >
     <rn-view
-      accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}"
-      accessible="true"
-      nativeID="logbox_footer_button_dismiss"
+      experimental_onSafeAreaInsetsChange="true"
+      flex="1"
     >
-      <rn-paragraph
-        allowFontScaling="true"
-        ellipsizeMode="tail"
-        fontSizeMultiplier="NaN"
-        foregroundColor="rgba(255, 255, 255, 1)"
-        includeFontPadding="false"
-        lineHeight="20"
-        maxFontSizeMultiplier="1.5"
-        overflow="hidden"
+      <rn-view
+        accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}"
+        accessible="true"
+        nativeID="logbox_footer_button_dismiss"
       >
-        Dismiss
-      </rn-paragraph>
+        <rn-paragraph
+          allowFontScaling="true"
+          ellipsizeMode="tail"
+          fontSizeMultiplier="NaN"
+          foregroundColor="rgba(255, 255, 255, 1)"
+          includeFontPadding="false"
+          lineHeight="20"
+          maxFontSizeMultiplier="1.5"
+          overflow="hidden"
+        >
+          Dismiss
+        </rn-paragraph>
+      </rn-view>
     </rn-view>
     <rn-view
-      accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}"
-      accessible="true"
-      nativeID="logbox_footer_button_minimize"
+      experimental_onSafeAreaInsetsChange="true"
+      flex="1"
     >
-      <rn-paragraph
-        allowFontScaling="true"
-        ellipsizeMode="tail"
-        fontSizeMultiplier="NaN"
-        foregroundColor="rgba(255, 255, 255, 1)"
-        includeFontPadding="false"
-        lineHeight="20"
-        maxFontSizeMultiplier="1.5"
-        overflow="hidden"
+      <rn-view
+        accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}"
+        accessible="true"
+        nativeID="logbox_footer_button_minimize"
       >
-        Minimize
-      </rn-paragraph>
+        <rn-paragraph
+          allowFontScaling="true"
+          ellipsizeMode="tail"
+          fontSizeMultiplier="NaN"
+          foregroundColor="rgba(255, 255, 255, 1)"
+          includeFontPadding="false"
+          lineHeight="20"
+          maxFontSizeMultiplier="1.5"
+          overflow="hidden"
+        >
+          Minimize
+        </rn-paragraph>
+      </rn-view>
     </rn-view>
     <rn-view
-      accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}"
-      accessible="true"
-      nativeID="logbox_footer_button_copy"
+      experimental_onSafeAreaInsetsChange="true"
+      flex="1"
     >
-      <rn-paragraph
-        allowFontScaling="true"
-        ellipsizeMode="tail"
-        fontSizeMultiplier="NaN"
-        foregroundColor="rgba(255, 255, 255, 1)"
-        includeFontPadding="false"
-        lineHeight="20"
-        maxFontSizeMultiplier="1.5"
-        overflow="hidden"
+      <rn-view
+        accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}"
+        accessible="true"
+        nativeID="logbox_footer_button_copy"
       >
-        Copy
-      </rn-paragraph>
+        <rn-paragraph
+          allowFontScaling="true"
+          ellipsizeMode="tail"
+          fontSizeMultiplier="NaN"
+          foregroundColor="rgba(255, 255, 255, 1)"
+          includeFontPadding="false"
+          lineHeight="20"
+          maxFontSizeMultiplier="1.5"
+          overflow="hidden"
+        >
+          Copy
+        </rn-paragraph>
+      </rn-view>
     </rn-view>
   </rn-view>
 </rn-view>
@@ -197,67 +214,69 @@ exports[`LogBoxInspector should render warning with selectedIndex 0 1`] = `
 >
   <rn-view
     backgroundColor="rgba(250, 186, 48, 1)"
-  />
-  <rn-view
-    accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}"
-    accessible="true"
-    alignItems="center"
-    aspectRatio="1"
-    justifyContent="center"
-    marginBottom="-8"
-    marginLeft="6"
-    marginRight="6"
-    marginTop="5"
-    nativeID="logbox_header_button_prev"
-  >
-    <rn-image
-      height="14"
-      overflow="hidden"
-      source-scale="1"
-      source-size="{16, 28}"
-      source-type="local"
-      source-uri="file://drawable-mdpi/packages_reactnative_libraries_logbox_ui_logboximages_chevronleft.png"
-      tintColor="rgba(255, 255, 255, 1)"
-      width="8"
-    />
-  </rn-view>
-  <rn-paragraph
-    allowFontScaling="true"
-    ellipsizeMode="tail"
-    fontSize="16"
-    fontSizeMultiplier="NaN"
-    fontWeight="600"
-    foregroundColor="rgba(255, 255, 255, 1)"
-    includeFontPadding="false"
-    lineHeight="20"
-    maxFontSizeMultiplier="1.5"
-    nativeID="logbox_header_title_text"
-    overflow="hidden"
+    experimental_onSafeAreaInsetsChange="true"
   >
-    Log 1 of 3
-  </rn-paragraph>
-  <rn-view
-    accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}"
-    accessible="true"
-    alignItems="center"
-    aspectRatio="1"
-    justifyContent="center"
-    marginBottom="-8"
-    marginLeft="6"
-    marginRight="6"
-    marginTop="5"
-    nativeID="logbox_header_button_next"
-  >
-    <rn-image
-      height="14"
+    <rn-view
+      accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}"
+      accessible="true"
+      alignItems="center"
+      aspectRatio="1"
+      justifyContent="center"
+      marginBottom="-8"
+      marginLeft="6"
+      marginRight="6"
+      marginTop="5"
+      nativeID="logbox_header_button_prev"
+    >
+      <rn-image
+        height="14"
+        overflow="hidden"
+        source-scale="1"
+        source-size="{16, 28}"
+        source-type="local"
+        source-uri="file://drawable-mdpi/packages_reactnative_libraries_logbox_ui_logboximages_chevronleft.png"
+        tintColor="rgba(255, 255, 255, 1)"
+        width="8"
+      />
+    </rn-view>
+    <rn-paragraph
+      allowFontScaling="true"
+      ellipsizeMode="tail"
+      fontSize="16"
+      fontSizeMultiplier="NaN"
+      fontWeight="600"
+      foregroundColor="rgba(255, 255, 255, 1)"
+      includeFontPadding="false"
+      lineHeight="20"
+      maxFontSizeMultiplier="1.5"
+      nativeID="logbox_header_title_text"
       overflow="hidden"
-      source-scale="1"
-      source-size="{16, 28}"
-      source-type="local"
-      source-uri="file://drawable-mdpi/packages_reactnative_libraries_logbox_ui_logboximages_chevronright.png"
-      tintColor="rgba(255, 255, 255, 1)"
-      width="8"
-    />
+    >
+      Log 1 of 3
+    </rn-paragraph>
+    <rn-view
+      accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}"
+      accessible="true"
+      alignItems="center"
+      aspectRatio="1"
+      justifyContent="center"
+      marginBottom="-8"
+      marginLeft="6"
+      marginRight="6"
+      marginTop="5"
+      nativeID="logbox_header_button_next"
+    >
+      <rn-image
+        height="14"
+        overflow="hidden"
+        source-scale="1"
+        source-size="{16, 28}"
+        source-type="local"
+        source-uri="file://drawable-mdpi/packages_reactnative_libraries_logbox_ui_logboximages_chevronright.png"
+        tintColor="rgba(255, 255, 255, 1)"
+        width="8"
+      />
+    </rn-view>
   </rn-view>
   <rn-view
     backgroundColor="rgba(51, 51, 51, 1)"
@@ -319,58 +338,73 @@ exports[`LogBoxInspector should render warning with selectedIndex 0 1`] = `
     flexDirection="row"
   >
     <rn-view
-      accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}"
-      accessible="true"
-      nativeID="logbox_footer_button_dismiss"
+      experimental_onSafeAreaInsetsChange="true"
+      flex="1"
     >
-      <rn-paragraph
-        allowFontScaling="true"
-        ellipsizeMode="tail"
-        fontSizeMultiplier="NaN"
-        foregroundColor="rgba(255, 255, 255, 1)"
-        includeFontPadding="false"
-        lineHeight="20"
-        maxFontSizeMultiplier="1.5"
-        overflow="hidden"
+      <rn-view
+        accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}"
+        accessible="true"
+        nativeID="logbox_footer_button_dismiss"
       >
-        Dismiss
-      </rn-paragraph>
+        <rn-paragraph
+          allowFontScaling="true"
+          ellipsizeMode="tail"
+          fontSizeMultiplier="NaN"
+          foregroundColor="rgba(255, 255, 255, 1)"
+          includeFontPadding="false"
+          lineHeight="20"
+          maxFontSizeMultiplier="1.5"
+          overflow="hidden"
+        >
+          Dismiss
+        </rn-paragraph>
+      </rn-view>
     </rn-view>
     <rn-view
-      accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}"
-      accessible="true"
-      nativeID="logbox_footer_button_minimize"
+      experimental_onSafeAreaInsetsChange="true"
+      flex="1"
     >
-      <rn-paragraph
-        allowFontScaling="true"
-        ellipsizeMode="tail"
-        fontSizeMultiplier="NaN"
-        foregroundColor="rgba(255, 255, 255, 1)"
-        includeFontPadding="false"
-        lineHeight="20"
-        maxFontSizeMultiplier="1.5"
-        overflow="hidden"
+      <rn-view
+        accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}"
+        accessible="true"
+        nativeID="logbox_footer_button_minimize"
       >
-        Minimize
-      </rn-paragraph>
+        <rn-paragraph
+          allowFontScaling="true"
+          ellipsizeMode="tail"
+          fontSizeMultiplier="NaN"
+          foregroundColor="rgba(255, 255, 255, 1)"
+          includeFontPadding="false"
+          lineHeight="20"
+          maxFontSizeMultiplier="1.5"
+          overflow="hidden"
+        >
+          Minimize
+        </rn-paragraph>
+      </rn-view>
     </rn-view>
     <rn-view
-      accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}"
-      accessible="true"
-      nativeID="logbox_footer_button_copy"
+      experimental_onSafeAreaInsetsChange="true"
+      flex="1"
     >
-      <rn-paragraph
-        allowFontScaling="true"
-        ellipsizeMode="tail"
-        fontSizeMultiplier="NaN"
-        foregroundColor="rgba(255, 255, 255, 1)"
-        includeFontPadding="false"
-        lineHeight="20"
-        maxFontSizeMultiplier="1.5"
-        overflow="hidden"
+      <rn-view
+        accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}"
+        accessible="true"
+        nativeID="logbox_footer_button_copy"
       >
-        Copy
-      </rn-paragraph>
+        <rn-paragraph
+          allowFontScaling="true"
+          ellipsizeMode="tail"
+          fontSizeMultiplier="NaN"
+          foregroundColor="rgba(255, 255, 255, 1)"
+          includeFontPadding="false"
+          lineHeight="20"
+          maxFontSizeMultiplier="1.5"
+          overflow="hidden"
+        >
+          Copy
+        </rn-paragraph>
+      </rn-view>
     </rn-view>
   </rn-view>
 </rn-view>
diff --git a/packages/react-native/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorFooter-itest.js.snap b/packages/react-native/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorFooter-itest.js.snap
index e9dfe66c817d..3d47dcfdde25 100644
--- a/packages/react-native/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorFooter-itest.js.snap
+++ b/packages/react-native/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorFooter-itest.js.snap
@@ -32,58 +32,73 @@ exports[`LogBoxInspectorFooter should render two buttons for error 1`] = `
   flexDirection="row"
 >
   <rn-view
-    accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}"
-    accessible="true"
-    nativeID="logbox_footer_button_dismiss"
+    experimental_onSafeAreaInsetsChange="true"
+    flex="1"
   >
-    <rn-paragraph
-      allowFontScaling="true"
-      ellipsizeMode="tail"
-      fontSizeMultiplier="NaN"
-      foregroundColor="rgba(255, 255, 255, 1)"
-      includeFontPadding="false"
-      lineHeight="20"
-      maxFontSizeMultiplier="1.5"
-      overflow="hidden"
+    <rn-view
+      accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}"
+      accessible="true"
+      nativeID="logbox_footer_button_dismiss"
     >
-      Dismiss
-    </rn-paragraph>
+      <rn-paragraph
+        allowFontScaling="true"
+        ellipsizeMode="tail"
+        fontSizeMultiplier="NaN"
+        foregroundColor="rgba(255, 255, 255, 1)"
+        includeFontPadding="false"
+        lineHeight="20"
+        maxFontSizeMultiplier="1.5"
+        overflow="hidden"
+      >
+        Dismiss
+      </rn-paragraph>
+    </rn-view>
   </rn-view>
   <rn-view
-    accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}"
-    accessible="true"
-    nativeID="logbox_footer_button_minimize"
+    experimental_onSafeAreaInsetsChange="true"
+    flex="1"
   >
-    <rn-paragraph
-      allowFontScaling="true"
-      ellipsizeMode="tail"
-      fontSizeMultiplier="NaN"
-      foregroundColor="rgba(255, 255, 255, 1)"
-      includeFontPadding="false"
-      lineHeight="20"
-      maxFontSizeMultiplier="1.5"
-      overflow="hidden"
+    <rn-view
+      accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}"
+      accessible="true"
+      nativeID="logbox_footer_button_minimize"
     >
-      Minimize
-    </rn-paragraph>
+      <rn-paragraph
+        allowFontScaling="true"
+        ellipsizeMode="tail"
+        fontSizeMultiplier="NaN"
+        foregroundColor="rgba(255, 255, 255, 1)"
+        includeFontPadding="false"
+        lineHeight="20"
+        maxFontSizeMultiplier="1.5"
+        overflow="hidden"
+      >
+        Minimize
+      </rn-paragraph>
+    </rn-view>
   </rn-view>
   <rn-view
-    accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}"
-    accessible="true"
-    nativeID="logbox_footer_button_copy"
+    experimental_onSafeAreaInsetsChange="true"
+    flex="1"
   >
-    <rn-paragraph
-      allowFontScaling="true"
-      ellipsizeMode="tail"
-      fontSizeMultiplier="NaN"
-      foregroundColor="rgba(255, 255, 255, 1)"
-      includeFontPadding="false"
-      lineHeight="20"
-      maxFontSizeMultiplier="1.5"
-      overflow="hidden"
+    <rn-view
+      accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}"
+      accessible="true"
+      nativeID="logbox_footer_button_copy"
     >
-      Copy
-    </rn-paragraph>
+      <rn-paragraph
+        allowFontScaling="true"
+        ellipsizeMode="tail"
+        fontSizeMultiplier="NaN"
+        foregroundColor="rgba(255, 255, 255, 1)"
+        includeFontPadding="false"
+        lineHeight="20"
+        maxFontSizeMultiplier="1.5"
+        overflow="hidden"
+      >
+        Copy
+      </rn-paragraph>
+    </rn-view>
   </rn-view>
 </rn-view>
 `;
@@ -94,58 +109,73 @@ exports[`LogBoxInspectorFooter should render two buttons for fatal 1`] = `
   flexDirection="row"
 >
   <rn-view
-    accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}"
-    accessible="true"
-    nativeID="logbox_footer_button_dismiss"
+    experimental_onSafeAreaInsetsChange="true"
+    flex="1"
   >
-    <rn-paragraph
-      allowFontScaling="true"
-      ellipsizeMode="tail"
-      fontSizeMultiplier="NaN"
-      foregroundColor="rgba(255, 255, 255, 1)"
-      includeFontPadding="false"
-      lineHeight="20"
-      maxFontSizeMultiplier="1.5"
-      overflow="hidden"
+    <rn-view
+      accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}"
+      accessible="true"
+      nativeID="logbox_footer_button_dismiss"
     >
-      Dismiss
-    </rn-paragraph>
+      <rn-paragraph
+        allowFontScaling="true"
+        ellipsizeMode="tail"
+        fontSizeMultiplier="NaN"
+        foregroundColor="rgba(255, 255, 255, 1)"
+        includeFontPadding="false"
+        lineHeight="20"
+        maxFontSizeMultiplier="1.5"
+        overflow="hidden"
+      >
+        Dismiss
+      </rn-paragraph>
+    </rn-view>
   </rn-view>
   <rn-view
-    accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}"
-    accessible="true"
-    nativeID="logbox_footer_button_minimize"
+    experimental_onSafeAreaInsetsChange="true"
+    flex="1"
   >
-    <rn-paragraph
-      allowFontScaling="true"
-      ellipsizeMode="tail"
-      fontSizeMultiplier="NaN"
-      foregroundColor="rgba(255, 255, 255, 1)"
-      includeFontPadding="false"
-      lineHeight="20"
-      maxFontSizeMultiplier="1.5"
-      overflow="hidden"
+    <rn-view
+      accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}"
+      accessible="true"
+      nativeID="logbox_footer_button_minimize"
     >
-      Minimize
-    </rn-paragraph>
+      <rn-paragraph
+        allowFontScaling="true"
+        ellipsizeMode="tail"
+        fontSizeMultiplier="NaN"
+        foregroundColor="rgba(255, 255, 255, 1)"
+        includeFontPadding="false"
+        lineHeight="20"
+        maxFontSizeMultiplier="1.5"
+        overflow="hidden"
+      >
+        Minimize
+      </rn-paragraph>
+    </rn-view>
   </rn-view>
   <rn-view
-    accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}"
-    accessible="true"
-    nativeID="logbox_footer_button_copy"
+    experimental_onSafeAreaInsetsChange="true"
+    flex="1"
   >
-    <rn-paragraph
-      allowFontScaling="true"
-      ellipsizeMode="tail"
-      fontSizeMultiplier="NaN"
-      foregroundColor="rgba(255, 255, 255, 1)"
-      includeFontPadding="false"
-      lineHeight="20"
-      maxFontSizeMultiplier="1.5"
-      overflow="hidden"
+    <rn-view
+      accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}"
+      accessible="true"
+      nativeID="logbox_footer_button_copy"
     >
-      Copy
-    </rn-paragraph>
+      <rn-paragraph
+        allowFontScaling="true"
+        ellipsizeMode="tail"
+        fontSizeMultiplier="NaN"
+        foregroundColor="rgba(255, 255, 255, 1)"
+        includeFontPadding="false"
+        lineHeight="20"
+        maxFontSizeMultiplier="1.5"
+        overflow="hidden"
+      >
+        Copy
+      </rn-paragraph>
+    </rn-view>
   </rn-view>
 </rn-view>
 `;
@@ -156,58 +186,73 @@ exports[`LogBoxInspectorFooter should render two buttons for warning 1`] = `
   flexDirection="row"
 >
   <rn-view
-    accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}"
-    accessible="true"
-    nativeID="logbox_footer_button_dismiss"
+    experimental_onSafeAreaInsetsChange="true"
+    flex="1"
   >
-    <rn-paragraph
-      allowFontScaling="true"
-      ellipsizeMode="tail"
-      fontSizeMultiplier="NaN"
-      foregroundColor="rgba(255, 255, 255, 1)"
-      includeFontPadding="false"
-      lineHeight="20"
-      maxFontSizeMultiplier="1.5"
-      overflow="hidden"
+    <rn-view
+      accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}"
+      accessible="true"
+      nativeID="logbox_footer_button_dismiss"
     >
-      Dismiss
-    </rn-paragraph>
+      <rn-paragraph
+        allowFontScaling="true"
+        ellipsizeMode="tail"
+        fontSizeMultiplier="NaN"
+        foregroundColor="rgba(255, 255, 255, 1)"
+        includeFontPadding="false"
+        lineHeight="20"
+        maxFontSizeMultiplier="1.5"
+        overflow="hidden"
+      >
+        Dismiss
+      </rn-paragraph>
+    </rn-view>
   </rn-view>
   <rn-view
-    accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}"
-    accessible="true"
-    nativeID="logbox_footer_button_minimize"
+    experimental_onSafeAreaInsetsChange="true"
+    flex="1"
   >
-    <rn-paragraph
-      allowFontScaling="true"
-      ellipsizeMode="tail"
-      fontSizeMultiplier="NaN"
-      foregroundColor="rgba(255, 255, 255, 1)"
-      includeFontPadding="false"
-      lineHeight="20"
-      maxFontSizeMultiplier="1.5"
-      overflow="hidden"
+    <rn-view
+      accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}"
+      accessible="true"
+      nativeID="logbox_footer_button_minimize"
     >
-      Minimize
-    </rn-paragraph>
+      <rn-paragraph
+        allowFontScaling="true"
+        ellipsizeMode="tail"
+        fontSizeMultiplier="NaN"
+        foregroundColor="rgba(255, 255, 255, 1)"
+        includeFontPadding="false"
+        lineHeight="20"
+        maxFontSizeMultiplier="1.5"
+        overflow="hidden"
+      >
+        Minimize
+      </rn-paragraph>
+    </rn-view>
   </rn-view>
   <rn-view
-    accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}"
-    accessible="true"
-    nativeID="logbox_footer_button_copy"
+    experimental_onSafeAreaInsetsChange="true"
+    flex="1"
   >
-    <rn-paragraph
-      allowFontScaling="true"
-      ellipsizeMode="tail"
-      fontSizeMultiplier="NaN"
-      foregroundColor="rgba(255, 255, 255, 1)"
-      includeFontPadding="false"
-      lineHeight="20"
-      maxFontSizeMultiplier="1.5"
-      overflow="hidden"
+    <rn-view
+      accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}"
+      accessible="true"
+      nativeID="logbox_footer_button_copy"
     >
-      Copy
-    </rn-paragraph>
+      <rn-paragraph
+        allowFontScaling="true"
+        ellipsizeMode="tail"
+        fontSizeMultiplier="NaN"
+        foregroundColor="rgba(255, 255, 255, 1)"
+        includeFontPadding="false"
+        lineHeight="20"
+        maxFontSizeMultiplier="1.5"
+        overflow="hidden"
+      >
+        Copy
+      </rn-paragraph>
+    </rn-view>
   </rn-view>
 </rn-view>
 `;
diff --git a/packages/react-native/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorHeader-itest.js.snap b/packages/react-native/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorHeader-itest.js.snap
index b6136c251f63..2f617c689a0d 100644
--- a/packages/react-native/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorHeader-itest.js.snap
+++ b/packages/react-native/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorHeader-itest.js.snap
@@ -1,10 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`LogBoxInspectorHeader should render both buttons for two total 1`] = `
-<React.Fragment>
-  <rn-view
-    backgroundColor="rgba(250, 186, 48, 1)"
-  />
+<rn-view
+  backgroundColor="rgba(250, 186, 48, 1)"
+  experimental_onSafeAreaInsetsChange="true"
+>
   <rn-view
     accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}"
     accessible="true"
@@ -66,14 +66,14 @@ exports[`LogBoxInspectorHeader should render both buttons for two total 1`] = `
       width="8"
     />
   </rn-view>
-</React.Fragment>
+</rn-view>
 `;
 
 exports[`LogBoxInspectorHeader should render no buttons for one total 1`] = `
-<React.Fragment>
-  <rn-view
-    backgroundColor="rgba(250, 186, 48, 1)"
-  />
+<rn-view
+  backgroundColor="rgba(250, 186, 48, 1)"
+  experimental_onSafeAreaInsetsChange="true"
+>
   <rn-view
     alignItems="center"
     aspectRatio="1"
@@ -109,14 +109,14 @@ exports[`LogBoxInspectorHeader should render no buttons for one total 1`] = `
     marginTop="5"
     nativeID="logbox_header_button_next"
   />
-</React.Fragment>
+</rn-view>
 `;
 
 exports[`LogBoxInspectorHeader should render syntax error header 1`] = `
-<React.Fragment>
-  <rn-view
-    backgroundColor="rgba(243, 83, 105, 1)"
-  />
+<rn-view
+  backgroundColor="rgba(243, 83, 105, 1)"
+  experimental_onSafeAreaInsetsChange="true"
+>
   <rn-paragraph
     allowFontScaling="true"
     ellipsizeMode="tail"
@@ -132,15 +132,17 @@ exports[`LogBoxInspectorHeader should render syntax error header 1`] = `
   >
     Failed to compile
   </rn-paragraph>
-</React.Fragment>
+</rn-view>
 `;
 
 exports[`LogBoxInspectorHeader should render two buttons for three or more total 1`] = `
-<React.Fragment>
-  <rn-view
-    backgroundColor="rgba(250, 186, 48, 1)"
-  />
+<rn-view
+  backgroundColor="rgba(250, 186, 48, 1)"
+  experimental_onSafeAreaInsetsChange="true"
+>
   <rn-view
+    accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}"
+    accessible="true"
     alignItems="center"
     aspectRatio="1"
     justifyContent="center"
@@ -149,7 +151,18 @@ exports[`LogBoxInspectorHeader should render two buttons for three or more total
     marginRight="6"
     marginTop="5"
     nativeID="logbox_header_button_prev"
-  />
+  >
+    <rn-image
+      height="14"
+      overflow="hidden"
+      source-scale="1"
+      source-size="{16, 28}"
+      source-type="local"
+      source-uri="file://drawable-mdpi/packages_reactnative_libraries_logbox_ui_logboximages_chevronleft.png"
+      tintColor="rgba(255, 255, 255, 1)"
+      width="8"
+    />
+  </rn-view>
   <rn-paragraph
     allowFontScaling="true"
     ellipsizeMode="tail"
@@ -163,9 +176,11 @@ exports[`LogBoxInspectorHeader should render two buttons for three or more total
     nativeID="logbox_header_title_text"
     overflow="hidden"
   >
-    Log 1 of 1
+    Log 1 of 3
   </rn-paragraph>
   <rn-view
+    accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}"
+    accessible="true"
     alignItems="center"
     aspectRatio="1"
     justifyContent="center"
@@ -174,6 +189,17 @@ exports[`LogBoxInspectorHeader should render two buttons for three or more total
     marginRight="6"
     marginTop="5"
     nativeID="logbox_header_button_next"
-  />
-</React.Fragment>
+  >
+    <rn-image
+      height="14"
+      overflow="hidden"
+      source-scale="1"
+      source-size="{16, 28}"
+      source-type="local"
+      source-uri="file://drawable-mdpi/packages_reactnative_libraries_logbox_ui_logboximages_chevronright.png"
+      tintColor="rgba(255, 255, 255, 1)"
+      width="8"
+    />
+  </rn-view>
+</rn-view>
 `;