Set inset based margins on LogBox (#46338)

Summary:
Pull Request resolved: #46338

**Issue:**
With forced edge-to-edge on Android 15, LogBox bottom tab bar is hidden behind 3 button nav bar and is unusable.

**Solution:**
LogBox is using Android Dialog so update it to set margins based on inset values. With this change we can get rid of android header logic from JS.

Changelog:
[Android][Changed] - Modify LogBox to be usable on Android 15

Reviewed By: mdvacca

Differential Revision: D62224124

fbshipit-source-id: 4721753bf340bd813bcd560052c52b63fa58ad4b

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

@@ -28,18 +28,7 @@ type Props = $ReadOnly<{
 }>;
 
 const LogBoxInspectorHeaderSafeArea: React.AbstractComponent<ViewProps> =
-  Platform.OS === 'android'
-    ? function LogBoxInspectorHeaderSafeArea(props) {
-        // NOTE: Inline the import of `StatusBar` so that initializing this module
-        // does not require initializing a TurboModule (and main thread one, too).
-        const {currentHeight} = require('../../Components/StatusBar/StatusBar');
-        const style = StyleSheet.compose(
-          {paddingTop: currentHeight},
-          props.style,
-        );
-        return <View {...props} style={style} />;
-      }
-    : SafeAreaView;
+  Platform.OS === 'android' ? View : SafeAreaView;
 
 export default function LogBoxInspectorHeader(props: Props): React.Node {
   if (props.level === 'syntax') {

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/devsupport/LogBoxDialog.kt

@@ -9,17 +9,45 @@ package com.facebook.react.devsupport
 
 import android.app.Activity
 import android.app.Dialog
+import android.graphics.Color
+import android.graphics.drawable.ColorDrawable
+import android.os.Bundle
 import android.view.View
 import android.view.Window
+import android.widget.FrameLayout
+import androidx.core.view.ViewCompat
+import androidx.core.view.WindowInsetsCompat
 import com.facebook.react.R
 
 /** Dialog for displaying JS errors in LogBox. */
-internal class LogBoxDialog(context: Activity, reactRootView: View?) :
+internal class LogBoxDialog(context: Activity, private val reactRootView: View?) :
     Dialog(context, R.style.Theme_Catalyst_LogBox) {
   init {
     requestWindowFeature(Window.FEATURE_NO_TITLE)
     if (reactRootView != null) {
       setContentView(reactRootView)
     }
   }
+
+  override fun onCreate(savedInstanceState: Bundle?) {
+    super.onCreate(savedInstanceState)
+    // set background color so it will show below transparent system bars on forced edge-to-edge
+    this.window?.setBackgroundDrawable(ColorDrawable(Color.BLACK))
+    // register insets listener to update margins on the ReactRootView to avoid overlap w/ system bars
+    reactRootView?.let { rootView ->
+      val insetsType: Int =
+          WindowInsetsCompat.Type.systemBars() or WindowInsetsCompat.Type.displayCutout()
+
+      val windowInsetsListener = { view: View, windowInsets: WindowInsetsCompat ->
+        val insets = windowInsets.getInsets(insetsType)
+
+        (view.layoutParams as FrameLayout.LayoutParams).apply {
+          setMargins(insets.left, insets.top, insets.right, insets.bottom)
+        }
+
+        WindowInsetsCompat.CONSUMED
+      }
+      ViewCompat.setOnApplyWindowInsetsListener(rootView, windowInsetsListener)
+    }
+  }
 }