Fix LogBox inspector content under horizontal safe area insets

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

@@ -8,8 +8,12 @@
  * @format
  */
 
+import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
+import type {SafeAreaInsetsChangeEvent} from '../../Types/CoreEventTypes';
+
 import Keyboard from '../../Components/Keyboard/Keyboard';
 import View from '../../Components/View/View';
+import I18nManager from '../../ReactNative/I18nManager';
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import BackHandler from '../../Utilities/BackHandler';
 import * as LogBoxData from '../Data/LogBoxData';
@@ -19,7 +23,7 @@ import LogBoxInspectorFooter from './LogBoxInspectorFooter';
 import LogBoxInspectorHeader from './LogBoxInspectorHeader';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
-import {useEffect} from 'react';
+import {useCallback, useEffect, useState} from 'react';
 
 type Props = Readonly<{
   onDismiss: () => void,
@@ -56,6 +60,21 @@ export default function LogBoxInspector(props: Props): React.Node {
     Keyboard.dismiss();
   }, []);
 
+  const [safeAreaPadding, setSafeAreaPadding] = useState<?ViewStyleProp>(null);
+  const handleSafeAreaInsetsChange = useCallback(
+    (event: SafeAreaInsetsChangeEvent) => {
+      const {left, right} = event.nativeEvent.insets;
+      // Insets are physical edges. Logical edges resolve by layout direction
+      // alone, which keeps clear of the RTL left/right swap.
+      const {isRTL} = I18nManager.getConstants();
+      setSafeAreaPadding({
+        paddingStart: isRTL ? right : left,
+        paddingEnd: isRTL ? left : right,
+      });
+    },
+    [],
+  );
+
   useEffect(() => {
     if (log == null) {
       return;
@@ -123,14 +142,21 @@ export default function LogBoxInspector(props: Props): React.Node {
   }
 
   return (
-    <View id="logbox_inspector" style={styles.root}>
+    <View
+      id="logbox_inspector"
+      style={styles.root}
+      experimental_onSafeAreaInsetsChange={handleSafeAreaInsetsChange}>
       <LogBoxInspectorHeader
         onSelectIndex={props.onChangeSelectedIndex}
         selectedIndex={selectedIndex}
         total={logs.length}
         level={log.level}
       />
-      <LogBoxInspectorBody log={log} onRetry={_handleRetry} />
+      <LogBoxInspectorBody
+        log={log}
+        onRetry={_handleRetry}
+        safeAreaPadding={safeAreaPadding}
+      />
       <LogBoxInspectorFooter
         onDismiss={props.onDismiss}
         onMinimize={props.onMinimize}

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

@@ -8,7 +8,10 @@
  * @format
  */
 
+import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
+
 import ScrollView from '../../Components/ScrollView/ScrollView';
+import View from '../../Components/View/View';
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import LogBoxLog from '../Data/LogBoxLog';
 import LogBoxInspectorCodeFrame from './LogBoxInspectorCodeFrame';
@@ -30,6 +33,7 @@ const headerTitleMap = {
 export default function LogBoxInspectorBody(props: {
   log: LogBoxLog,
   onRetry: () => void,
+  safeAreaPadding?: ?ViewStyleProp,
 }): React.Node {
   const [collapsed, setCollapsed] = useState(true);
 
@@ -50,14 +54,20 @@ export default function LogBoxInspectorBody(props: {
           message={props.log.message}
           level={props.log.level}
           title={headerTitle}
+          style={props.safeAreaPadding}
         />
         <ScrollView style={styles.scrollBody}>
-          <LogBoxInspectorCodeFrame
-            codeFrame={props.log.codeFrame}
-            componentCodeFrame={props.log.componentCodeFrame}
-          />
-          <LogBoxInspectorReactFrames log={props.log} />
-          <LogBoxInspectorStackFrames log={props.log} onRetry={props.onRetry} />
+          <View style={props.safeAreaPadding}>
+            <LogBoxInspectorCodeFrame
+              codeFrame={props.log.codeFrame}
+              componentCodeFrame={props.log.componentCodeFrame}
+            />
+            <LogBoxInspectorReactFrames log={props.log} />
+            <LogBoxInspectorStackFrames
+              log={props.log}
+              onRetry={props.onRetry}
+            />
+          </View>
         </ScrollView>
       </>
     );
@@ -70,13 +80,16 @@ export default function LogBoxInspectorBody(props: {
         message={props.log.message}
         level={props.log.level}
         title={headerTitle}
+        style={props.safeAreaPadding}
       />
-      <LogBoxInspectorCodeFrame
-        codeFrame={props.log.codeFrame}
-        componentCodeFrame={props.log.componentCodeFrame}
-      />
-      <LogBoxInspectorReactFrames log={props.log} />
-      <LogBoxInspectorStackFrames log={props.log} onRetry={props.onRetry} />
+      <View style={props.safeAreaPadding}>
+        <LogBoxInspectorCodeFrame
+          codeFrame={props.log.codeFrame}
+          componentCodeFrame={props.log.componentCodeFrame}
+        />
+        <LogBoxInspectorReactFrames log={props.log} />
+        <LogBoxInspectorStackFrames log={props.log} onRetry={props.onRetry} />
+      </View>
     </ScrollView>
   );
 }

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

@@ -8,6 +8,7 @@
  * @format
  */
 
+import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
 import type {LogLevel} from '../Data/LogBoxLog';
 import type {Message} from '../Data/parseLogBoxLog';
 
@@ -26,6 +27,7 @@ component LogBoxInspectorMessageHeader(
   level: LogLevel,
   title: string,
   onPress: () => void,
+  style?: ?ViewStyleProp,
 ) {
   function renderShowMore() {
     if (message.content.length < SHOW_MORE_MESSAGE_LENGTH || !collapsed) {
@@ -42,7 +44,7 @@ component LogBoxInspectorMessageHeader(
   }
 
   return (
-    <View style={messageStyles.body}>
+    <View style={[messageStyles.body, style]}>
       <View style={messageStyles.heading}>
         <Text
           maxFontSizeMultiplier={1.5}