react-native-tvos 0.75.3-0 → 0.76.0-0

package/ReactAndroid/src/main/java/com/facebook/react/defaults/DefaultReactHostDelegate.kt

@@ -45,7 +45,7 @@ public class DefaultReactHostDelegate(
     override val jsRuntimeFactory: JSRuntimeFactory = HermesInstance(),
     override val bindingsInstaller: BindingsInstaller? = null,
     private val reactNativeConfig: ReactNativeConfig = ReactNativeConfig.DEFAULT_CONFIG,
-    private val exceptionHandler: (Exception) -> Unit = {},
+    private val exceptionHandler: (Exception) -> Unit = { throw it },
     override val turboModuleManagerDelegateBuilder: ReactPackageTurboModuleManagerDelegate.Builder
 ) : ReactHostDelegate {
 

package/ReactAndroid/src/main/java/com/facebook/react/defaults/DefaultReactNativeHost.kt

@@ -111,6 +111,7 @@ protected constructor(
           packages,
           jsMainModuleName,
           bundleAssetName ?: "index",
+          null,
           isHermesEnabled ?: true,
           useDeveloperSupport,
       )

package/ReactAndroid/src/main/java/com/facebook/react/devsupport/BridgeDevSupportManager.java

@@ -8,17 +8,14 @@
 package com.facebook.react.devsupport;
 
 import android.content.Context;
-import android.widget.Toast;
 import androidx.annotation.Nullable;
 import com.facebook.common.logging.FLog;
 import com.facebook.debug.holder.PrinterHolder;
 import com.facebook.debug.tags.ReactDebugOverlayTags;
 import com.facebook.infer.annotation.Assertions;
-import com.facebook.react.R;
 import com.facebook.react.bridge.CatalystInstance;
 import com.facebook.react.bridge.JSBundleLoader;
 import com.facebook.react.bridge.JavaJSExecutor;
-import com.facebook.react.bridge.JavaScriptExecutorFactory;
 import com.facebook.react.bridge.ReactMarker;
 import com.facebook.react.bridge.ReactMarkerConstants;
 import com.facebook.react.bridge.UiThreadUtil;
@@ -27,12 +24,10 @@ import com.facebook.react.common.SurfaceDelegateFactory;
 import com.facebook.react.common.futures.SimpleSettableFuture;
 import com.facebook.react.devsupport.interfaces.DevBundleDownloadListener;
 import com.facebook.react.devsupport.interfaces.DevLoadingViewManager;
-import com.facebook.react.devsupport.interfaces.DevOptionHandler;
 import com.facebook.react.devsupport.interfaces.DevSplitBundleCallback;
 import com.facebook.react.devsupport.interfaces.PausedInDebuggerOverlayManager;
 import com.facebook.react.devsupport.interfaces.RedBoxHandler;
 import com.facebook.react.packagerconnection.RequestHandler;
-import java.io.File;
 import java.io.IOException;
 import java.util.Map;
 import java.util.concurrent.ExecutionException;
@@ -87,28 +82,6 @@ public final class BridgeDevSupportManager extends DevSupportManagerBase {
         surfaceDelegateFactory,
         devLoadingViewManager,
         pausedInDebuggerOverlayManager);
-
-    if (getDevSettings().isStartSamplingProfilerOnInit()) {
-      // Only start the profiler. If its already running, there is an error
-      if (!mIsSamplingProfilerEnabled) {
-        toggleJSSamplingProfiler();
-      } else {
-        Toast.makeText(
-                applicationContext,
-                "JS Sampling Profiler was already running, so did not start the sampling profiler",
-                Toast.LENGTH_LONG)
-            .show();
-      }
-    }
-
-    addCustomDevOption(
-        applicationContext.getString(R.string.catalyst_sample_profiler_toggle),
-        new DevOptionHandler() {
-          @Override
-          public void onOptionSelected() {
-            toggleJSSamplingProfiler();
-          }
-        });
   }
 
   @Override
@@ -216,50 +189,4 @@ public final class BridgeDevSupportManager extends DevSupportManagerBase {
                   () -> getReactInstanceDevHelper().onJSBundleLoadedFromServer()));
     }
   }
-
-  /** Starts of stops the sampling profiler */
-  private void toggleJSSamplingProfiler() {
-    JavaScriptExecutorFactory javaScriptExecutorFactory =
-        getReactInstanceDevHelper().getJavaScriptExecutorFactory();
-    if (!mIsSamplingProfilerEnabled) {
-      try {
-        javaScriptExecutorFactory.startSamplingProfiler();
-        Toast.makeText(getApplicationContext(), "Starting Sampling Profiler", Toast.LENGTH_SHORT)
-            .show();
-      } catch (UnsupportedOperationException e) {
-        Toast.makeText(
-                getApplicationContext(),
-                javaScriptExecutorFactory.toString() + " does not support Sampling Profiler",
-                Toast.LENGTH_LONG)
-            .show();
-      } finally {
-        mIsSamplingProfilerEnabled = true;
-      }
-    } else {
-      try {
-        final String outputPath =
-            File.createTempFile(
-                    "sampling-profiler-trace", ".cpuprofile", getApplicationContext().getCacheDir())
-                .getPath();
-        javaScriptExecutorFactory.stopSamplingProfiler(outputPath);
-        Toast.makeText(
-                getApplicationContext(),
-                "Saved results from Profiler to " + outputPath,
-                Toast.LENGTH_LONG)
-            .show();
-      } catch (IOException e) {
-        FLog.e(
-            ReactConstants.TAG,
-            "Could not create temporary file for saving results from Sampling Profiler");
-      } catch (UnsupportedOperationException e) {
-        Toast.makeText(
-                getApplicationContext(),
-                javaScriptExecutorFactory.toString() + "does not support Sampling Profiler",
-                Toast.LENGTH_LONG)
-            .show();
-      } finally {
-        mIsSamplingProfilerEnabled = false;
-      }
-    }
-  }
 }

package/ReactAndroid/src/main/java/com/facebook/react/devsupport/CxxInspectorPackagerConnection.java

@@ -101,24 +101,43 @@ import okhttp3.WebSocketListener;
               new WebSocketListener() {
                 @Override
                 public void onFailure(WebSocket _unused, Throwable t, @Nullable Response response) {
-                  @Nullable String message = t.getMessage();
-                  delegate.didFailWithError(null, message != null ? message : "<Unknown error>");
-                  // "No further calls to this listener will be made." -OkHttp docs for
-                  // WebSocketListener.onFailure
-                  delegate.close();
+                  scheduleCallback(
+                      new Runnable() {
+                        public void run() {
+                          @Nullable String message = t.getMessage();
+                          delegate.didFailWithError(
+                              null, message != null ? message : "<Unknown error>");
+                          // "No further calls to this listener will be made." -OkHttp docs for
+                          // WebSocketListener.onFailure
+                          delegate.close();
+                        }
+                      },
+                      0);
                 }
 
                 @Override
                 public void onMessage(WebSocket _unused, String text) {
-                  delegate.didReceiveMessage(text);
+                  scheduleCallback(
+                      new Runnable() {
+                        public void run() {
+                          delegate.didReceiveMessage(text);
+                        }
+                      },
+                      0);
                 }
 
                 @Override
                 public void onClosed(WebSocket _unused, int code, String reason) {
-                  delegate.didClose();
-                  // "No further calls to this listener will be made." -OkHttp docs for
-                  // WebSocketListener.onClosed
-                  delegate.close();
+                  scheduleCallback(
+                      new Runnable() {
+                        public void run() {
+                          delegate.didClose();
+                          // "No further calls to this listener will be made." -OkHttp docs for
+                          // WebSocketListener.onClosed
+                          delegate.close();
+                        }
+                      },
+                      0);
                 }
               });
       return new IWebSocket() {

package/ReactAndroid/src/main/java/com/facebook/react/devsupport/DefaultDevLoadingViewImplementation.kt

@@ -0,0 +1,120 @@
+/*
+ * 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.
+ */
+
+package com.facebook.react.devsupport
+
+import android.content.Context
+import android.graphics.Rect
+import android.view.Gravity
+import android.view.LayoutInflater
+import android.view.ViewGroup
+import android.view.WindowManager
+import android.widget.PopupWindow
+import android.widget.TextView
+import com.facebook.common.logging.FLog
+import com.facebook.react.R
+import com.facebook.react.bridge.UiThreadUtil
+import com.facebook.react.common.ReactConstants
+import com.facebook.react.devsupport.interfaces.DevLoadingViewManager
+import java.util.Locale
+
+/**
+ * Default implementation of Dev Loading View Manager to display loading messages on top of the
+ * screen. All methods are thread safe.
+ */
+public class DefaultDevLoadingViewImplementation(
+    private val reactInstanceDevHelper: ReactInstanceDevHelper
+) : DevLoadingViewManager {
+  private var devLoadingView: TextView? = null
+  private var devLoadingPopup: PopupWindow? = null
+
+  override fun showMessage(message: String) {
+    if (!isEnabled) {
+      return
+    }
+    UiThreadUtil.runOnUiThread { showInternal(message) }
+  }
+
+  override fun updateProgress(status: String?, done: Int?, total: Int?) {
+    if (!isEnabled) {
+      return
+    }
+    UiThreadUtil.runOnUiThread {
+      val percentage =
+          if (done != null && total != null && total > 0)
+              String.format(Locale.getDefault(), " %.1f%%", done.toFloat() / total * 100)
+          else ""
+      devLoadingView?.text =
+          "${status ?: "Loading"}${percentage}\u2026" // `...` character at the end
+    }
+  }
+
+  public override fun hide() {
+    if (isEnabled) {
+      UiThreadUtil.runOnUiThread { hideInternal() }
+    }
+  }
+
+  private fun showInternal(message: String) {
+    if (devLoadingPopup?.isShowing == true) {
+      // already showing
+      return
+    }
+    val currentActivity = reactInstanceDevHelper.currentActivity
+    if (currentActivity == null) {
+      FLog.e(
+          ReactConstants.TAG,
+          "Unable to display loading message because react " + "activity isn't available")
+      return
+    }
+
+    // PopupWindow#showAtLocation uses absolute screen position. In order for
+    // loading view to be placed below status bar (if the status bar is present) we need to pass
+    // an appropriate Y offset.
+    try {
+      val rectangle = Rect()
+      currentActivity.window.decorView.getWindowVisibleDisplayFrame(rectangle)
+      val topOffset = rectangle.top
+      val inflater =
+          currentActivity.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
+      val view = inflater.inflate(R.layout.dev_loading_view, null) as TextView
+      view.text = message
+      val popup =
+          PopupWindow(
+              view, ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT)
+      popup.isTouchable = false
+      popup.showAtLocation(currentActivity.window.decorView, Gravity.NO_GRAVITY, 0, topOffset)
+      devLoadingView = view
+      devLoadingPopup = popup
+      // TODO T164786028: Find out the root cause of the BadTokenException exception here
+    } catch (e: WindowManager.BadTokenException) {
+      FLog.e(
+          ReactConstants.TAG,
+          "Unable to display loading message because react activity isn't active, message: $message")
+    }
+  }
+
+  private fun hideInternal() {
+    val popup = devLoadingPopup ?: return
+    if (popup.isShowing == true) {
+      popup.dismiss()
+      devLoadingPopup = null
+      devLoadingView = null
+    }
+  }
+
+  private val context: Context?
+    get() = reactInstanceDevHelper.currentActivity
+
+  public companion object {
+    private var isEnabled = true
+
+    public fun setDevLoadingEnabled(enabled: Boolean) {
+      isEnabled = enabled
+    }
+  }
+}

package/ReactAndroid/src/main/java/com/facebook/react/devsupport/DevInternalSettings.kt

@@ -61,7 +61,6 @@ internal class DevInternalSettings(applicationContext: Context, private val list
     if (listener != null) {
       if (PREFS_FPS_DEBUG_KEY == key ||
           PREFS_JS_DEV_MODE_DEBUG_KEY == key ||
-          PREFS_START_SAMPLING_PROFILER_ON_INIT == key ||
           PREFS_JS_MINIFY_DEBUG_KEY == key) {
         listener.onInternalSettingsChanged()
       }
@@ -82,11 +81,9 @@ internal class DevInternalSettings(applicationContext: Context, private val list
       preferences.edit().putBoolean(PREFS_REMOTE_JS_DEBUG_KEY, value).apply()
     }
 
-  override var isStartSamplingProfilerOnInit: Boolean
-    get() = preferences.getBoolean(PREFS_START_SAMPLING_PROFILER_ON_INIT, false)
-    set(_) {
-      // not used
-    }
+  @Deprecated(
+      "Legacy sampling profiler is no longer supported - This field will be removed in React Native 0.77")
+  override var isStartSamplingProfilerOnInit: Boolean = false
 
   // Not supported.
   override fun addMenuItem(title: String) = Unit
@@ -109,6 +106,5 @@ internal class DevInternalSettings(applicationContext: Context, private val list
     private const val PREFS_INSPECTOR_DEBUG_KEY = "inspector_debug"
     private const val PREFS_HOT_MODULE_REPLACEMENT_KEY = "hot_module_replacement"
     private const val PREFS_REMOTE_JS_DEBUG_KEY = "remote_js_debug"
-    private const val PREFS_START_SAMPLING_PROFILER_ON_INIT = "start_sampling_profiler_on_init"
   }
 }

package/ReactAndroid/src/main/java/com/facebook/react/devsupport/DevServerHelper.java

@@ -385,6 +385,14 @@ public class DevServerHelper {
   private String createBundleURL(
       String mainModuleID, BundleType type, String host, boolean modulesOnly, boolean runModule) {
     boolean dev = getDevMode();
+    StringBuilder additionalOptionsBuilder = new StringBuilder();
+    for (Map.Entry<String, String> entry :
+        mPackagerConnectionSettings.getAdditionalOptionsForPackager().entrySet()) {
+      if (entry.getValue().length() == 0) {
+        continue;
+      }
+      additionalOptionsBuilder.append("&" + entry.getKey() + "=" + Uri.encode(entry.getValue()));
+    }
     return String.format(
             Locale.US,
             "http://%s/%s.%s?platform=android&dev=%s&lazy=%s&minify=%s&app=%s&modulesOnly=%s&runModule=%s",
@@ -397,7 +405,8 @@ public class DevServerHelper {
             mPackageName,
             modulesOnly ? "true" : "false",
             runModule ? "true" : "false")
-        + (InspectorFlags.getFuseboxEnabled() ? "&excludeSource=true&sourcePaths=url-server" : "");
+        + (InspectorFlags.getFuseboxEnabled() ? "&excludeSource=true&sourcePaths=url-server" : "")
+        + additionalOptionsBuilder.toString();
   }
 
   private String createBundleURL(String mainModuleID, BundleType type) {

package/ReactAndroid/src/main/java/com/facebook/react/devsupport/DevSupportManagerBase.java

@@ -998,11 +998,13 @@ public abstract class DevSupportManagerBase implements DevSupportManager {
       return;
     }
 
-    UiThreadUtil.runOnUiThread(
-        () -> {
-          mDevSettings.setRemoteJSDebugEnabled(isRemoteJSDebugEnabled);
-          handleReloadJS();
-        });
+    if (mDevSettings.isRemoteJSDebugEnabled() != isRemoteJSDebugEnabled) {
+      UiThreadUtil.runOnUiThread(
+          () -> {
+            mDevSettings.setRemoteJSDebugEnabled(isRemoteJSDebugEnabled);
+            handleReloadJS();
+          });
+    }
   }
 
   @Override
@@ -1183,4 +1185,9 @@ public abstract class DevSupportManagerBase implements DevSupportManager {
   public void hidePausedInDebuggerOverlay() {
     mPausedInDebuggerOverlayManager.hidePausedInDebuggerOverlay();
   }
+
+  @Override
+  public void setAdditionalOptionForPackager(String name, String value) {
+    mDevSettings.getPackagerConnectionSettings().setAdditionalOptionForPackager(name, value);
+  }
 }

package/ReactAndroid/src/main/java/com/facebook/react/devsupport/LogBoxDialog.kt

@@ -9,12 +9,18 @@ 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)
@@ -22,4 +28,26 @@ internal class LogBoxDialog(context: Activity, reactRootView: View?) :
       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)
+    }
+  }
 }

package/ReactAndroid/src/main/java/com/facebook/react/devsupport/LogBoxDialogSurfaceDelegate.kt

@@ -61,11 +61,10 @@ internal class LogBoxDialogSurfaceDelegate(private val devSupportManager: DevSup
   }
 
   override fun hide() {
-    if (!isShowing) {
-      return
+    if (isShowing) {
+      dialog?.dismiss()
     }
     (reactRootView?.parent as ViewGroup?)?.removeView(reactRootView)
-    dialog?.dismiss()
     dialog = null
   }
 

package/ReactAndroid/src/main/java/com/facebook/react/devsupport/LogBoxModule.kt

@@ -23,20 +23,18 @@ public class LogBoxModule(
       devSupportManager.createSurfaceDelegate(NAME)
           ?: LogBoxDialogSurfaceDelegate(devSupportManager)
 
-  /**
-   * LogBoxModule can be rendered in different surface. By default, it will use LogBoxDialog to wrap
-   * the content of logs. In other platform (for example VR), a surfaceDelegate can be provided so
-   * that the content can be wrapped in custom surface.
-   */
-  init {
-    UiThreadUtil.runOnUiThread { surfaceDelegate.createContentView("LogBox") }
-  }
-
   override fun show() {
-    if (!surfaceDelegate.isContentViewReady) {
-      return
+    UiThreadUtil.runOnUiThread {
+      if (!surfaceDelegate.isContentViewReady) {
+        /**
+         * LogBoxModule can be rendered in different surface. By default, it will use LogBoxDialog
+         * to wrap the content of logs. In other platform (for example VR), a surfaceDelegate can be
+         * provided so that the content can be wrapped in custom surface.
+         */
+        surfaceDelegate.createContentView("LogBox")
+      }
+      surfaceDelegate.show()
     }
-    UiThreadUtil.runOnUiThread { surfaceDelegate.show() }
   }
 
   override fun hide() {

package/ReactAndroid/src/main/java/com/facebook/react/devsupport/PausedInDebuggerOverlayDialogManager.java

@@ -9,10 +9,12 @@ package com.facebook.react.devsupport;
 
 import android.app.Dialog;
 import android.content.Context;
+import android.graphics.drawable.ColorDrawable;
 import android.view.Gravity;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.Window;
+import android.view.WindowManager;
 import android.widget.TextView;
 import androidx.annotation.Nullable;
 import androidx.core.util.Supplier;
@@ -44,20 +46,32 @@ import com.facebook.react.devsupport.interfaces.PausedInDebuggerOverlayManager;
           if (context == null) {
             return;
           }
+
           View dialogView =
               LayoutInflater.from(context).inflate(R.layout.paused_in_debugger_view, null);
-          mPausedInDebuggerDialog = new Dialog(context);
+          View resumeButton = Assertions.assertNotNull(dialogView.findViewById(R.id.button));
+          resumeButton.setOnClickListener((v) -> listener.onResume());
+          TextView buttonText = Assertions.assertNotNull(dialogView.findViewById(R.id.button_text));
+          buttonText.setText(message);
+
+          mPausedInDebuggerDialog = new Dialog(context, R.style.NoAnimationDialog);
           mPausedInDebuggerDialog.setContentView(dialogView);
           mPausedInDebuggerDialog.setCancelable(false);
-          TextView pausedText = Assertions.assertNotNull(dialogView.findViewById(R.id.paused_text));
-          pausedText.setText(message);
-          View resumeButton = Assertions.assertNotNull(dialogView.findViewById(R.id.resume_button));
-          resumeButton.setOnClickListener((v) -> listener.onResume());
+
           Window dialogWindow = mPausedInDebuggerDialog.getWindow();
           if (dialogWindow != null) {
+            WindowManager.LayoutParams layoutParams = dialogWindow.getAttributes();
+            layoutParams.dimAmount = 0.2f;
+
+            dialogWindow.setAttributes(layoutParams);
+            dialogWindow.addFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);
             dialogWindow.setGravity(Gravity.TOP);
+            dialogWindow.setElevation(0);
+            dialogWindow.setBackgroundDrawable(
+                new ColorDrawable(android.graphics.Color.TRANSPARENT));
             dialogWindow.setBackgroundDrawableResource(R.drawable.paused_in_debugger_background);
           }
+
           mPausedInDebuggerDialog.show();
         });
   }

package/ReactAndroid/src/main/java/com/facebook/react/devsupport/PerftestDevSupportManager.kt

@@ -0,0 +1,38 @@
+/*
+ * 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.
+ */
+
+package com.facebook.react.devsupport
+
+import android.content.Context
+import com.facebook.react.modules.debug.interfaces.DeveloperSettings
+
+/**
+ * Interface for accessing and interacting with development features related to performance testing.
+ * Communication is enabled via the Inspector, but everything else is disabled.
+ */
+public class PerftestDevSupportManager(
+    applicationContext: Context,
+) : ReleaseDevSupportManager() {
+
+  override public val devSettings: DeveloperSettings =
+      DevInternalSettings(
+          applicationContext,
+          object : DevInternalSettings.Listener {
+            override fun onInternalSettingsChanged() = Unit
+          })
+
+  private val devServerHelper: DevServerHelper =
+      DevServerHelper(devSettings, applicationContext, devSettings.packagerConnectionSettings)
+
+  override fun startInspector() {
+    devServerHelper.openInspectorConnection()
+  }
+
+  override fun stopInspector() {
+    devServerHelper.closeInspectorConnection()
+  }
+}

package/ReactAndroid/src/main/java/com/facebook/react/devsupport/RedBoxDialogSurfaceDelegate.java

@@ -9,15 +9,23 @@ 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.KeyEvent;
 import android.view.Window;
+import android.widget.FrameLayout;
 import androidx.annotation.Nullable;
+import androidx.core.graphics.Insets;
+import androidx.core.view.ViewCompat;
+import androidx.core.view.WindowInsetsCompat;
 import com.facebook.common.logging.FLog;
 import com.facebook.react.R;
 import com.facebook.react.common.ReactConstants;
 import com.facebook.react.common.SurfaceDelegate;
 import com.facebook.react.devsupport.interfaces.DevSupportManager;
 import com.facebook.react.devsupport.interfaces.RedBoxHandler;
+import java.util.Objects;
 
 /**
  * The implementation of SurfaceDelegate with {@link Activity}. This is the default SurfaceDelegate
@@ -102,6 +110,29 @@ class RedBoxDialogSurfaceDelegate implements SurfaceDelegate {
               }
               return super.onKeyUp(keyCode, event);
             }
+
+            @Override
+            protected void onCreate(Bundle savedInstanceState) {
+              Objects.requireNonNull(getWindow());
+              // set background color so it will show below transparent system bars on forced
+              // edge-to-edge
+              getWindow().setBackgroundDrawable(new ColorDrawable(Color.BLACK));
+              // register insets listener to update margins on the ReactRootView to avoid overlap w/
+              // system bars
+              int insetsType =
+                  WindowInsetsCompat.Type.systemBars() | WindowInsetsCompat.Type.displayCutout();
+
+              ViewCompat.setOnApplyWindowInsetsListener(
+                  mRedBoxContentView,
+                  (view, windowInsetsCompat) -> {
+                    Insets insets = windowInsetsCompat.getInsets(insetsType);
+
+                    FrameLayout.LayoutParams lp = (FrameLayout.LayoutParams) view.getLayoutParams();
+                    lp.setMargins(insets.left, insets.top, insets.right, insets.bottom);
+
+                    return WindowInsetsCompat.CONSUMED;
+                  });
+            }
           };
       mDialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
       mDialog.setContentView(mRedBoxContentView);