Correctly create the first modal state (#52835)

Summary:
There is currently a bug with Modals with New Architecture where the first frame is rendered incorrectly, specifically not accounting for all the vertical insets (only the status bar). This fixes it.

## Changelog:

[ANDROID] [FIXED] - Correctly account for insets on first render of Modals on New Arch


Test Plan: See internal CI

Differential Revision: D78975126

Pulled By: cortinico

Author: cortinico

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/fabric/FabricUIManager.java

@@ -70,6 +70,7 @@
 import com.facebook.react.internal.interop.InteropEventEmitter;
 import com.facebook.react.modules.core.ReactChoreographer;
 import com.facebook.react.modules.i18nmanager.I18nUtil;
+import com.facebook.react.uimanager.DisplayMetricsHolder;
 import com.facebook.react.uimanager.GuardedFrameCallback;
 import com.facebook.react.uimanager.IllegalViewOperationException;
 import com.facebook.react.uimanager.PixelUtil;
@@ -97,6 +98,7 @@
 import java.util.HashSet;
 import java.util.List;
 import java.util.Map;
+import java.util.Objects;
 import java.util.Queue;
 import java.util.Set;
 import java.util.concurrent.CopyOnWriteArrayList;
@@ -727,6 +729,14 @@ public boolean getThemeData(int surfaceId, float[] defaultTextInputPadding) {
     return true;
   }
 
+  private long getEncodedScreenSizeWithoutVerticalInsets(int surfaceId) {
+    SurfaceMountingManager surfaceMountingManager = mMountingManager.getSurfaceManager(surfaceId);
+    Objects.requireNonNull(surfaceMountingManager);
+    Objects.requireNonNull(surfaceMountingManager.getContext());
+    return DisplayMetricsHolder.getEncodedScreenSizeWithoutVerticalInsets(
+        surfaceMountingManager.getContext().getCurrentActivity());
+  }
+
   @Override
   public void addUIManagerEventListener(UIManagerListener listener) {
     mListeners.add(listener);

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/DisplayMetricsHolder.kt

@@ -13,13 +13,16 @@ import android.util.DisplayMetrics
 import android.view.WindowManager
 import androidx.core.view.ViewCompat
 import androidx.core.view.WindowInsetsCompat
+import com.facebook.proguard.annotations.DoNotStrip
 import com.facebook.react.bridge.WritableMap
 import com.facebook.react.bridge.WritableNativeMap
+import com.facebook.react.uimanager.PixelUtil.pxToDp
 
 /**
  * Holds an instance of the current DisplayMetrics so we don't have to thread it through all the
  * classes that need it.
  */
+@DoNotStrip
 public object DisplayMetricsHolder {
   private const val INITIALIZATION_MISSING_MESSAGE =
       "DisplayMetricsHolder must be initialized with initDisplayMetricsIfNotInitialized or initDisplayMetrics"
@@ -111,4 +114,23 @@ public object DisplayMetricsHolder {
                 WindowInsetsCompat.Type.displayCutout())
         .top
   }
+
+  // This annotation can be removed once FabricUIManager is migrated to Kotlin
+  @JvmName("getEncodedScreenSizeWithoutVerticalInsets")
+  @JvmStatic
+  internal fun getEncodedScreenSizeWithoutVerticalInsets(activity: Activity?): Long {
+    val windowInsets = activity?.window?.decorView?.let(ViewCompat::getRootWindowInsets) ?: return 0
+    val insets =
+        windowInsets.getInsets(
+            WindowInsetsCompat.Type.statusBars() or
+                WindowInsetsCompat.Type.navigationBars() or
+                WindowInsetsCompat.Type.displayCutout())
+    val verticalInsets = insets.top + insets.bottom
+    return encodeFloatsToLong(
+        (checkNotNull(screenDisplayMetrics).widthPixels).toFloat().pxToDp(),
+        (checkNotNull(screenDisplayMetrics).heightPixels - verticalInsets).toFloat().pxToDp())
+  }
+
+  private fun encodeFloatsToLong(width: Float, height: Float): Long =
+      (width.toRawBits().toLong()) shl 32 or (height.toRawBits().toLong())
 }

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostView.kt

@@ -40,8 +40,6 @@ import com.facebook.react.bridge.WritableNativeMap
 import com.facebook.react.common.annotations.VisibleForTesting
 import com.facebook.react.common.build.ReactBuildConfig
 import com.facebook.react.config.ReactFeatureFlags
-import com.facebook.react.uimanager.DisplayMetricsHolder
-import com.facebook.react.uimanager.DisplayMetricsHolder.getStatusBarHeightPx
 import com.facebook.react.uimanager.JSPointerDispatcher
 import com.facebook.react.uimanager.JSTouchDispatcher
 import com.facebook.react.uimanager.PixelUtil.pxToDp
@@ -51,13 +49,11 @@ import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.UIManagerModule
 import com.facebook.react.uimanager.events.EventDispatcher
 import com.facebook.react.views.common.ContextUtils
-import com.facebook.react.views.modal.ReactModalHostView.DialogRootViewGroup
 import com.facebook.react.views.view.ReactViewGroup
 import com.facebook.react.views.view.disableEdgeToEdge
 import com.facebook.react.views.view.enableEdgeToEdge
 import com.facebook.react.views.view.isEdgeToEdgeFeatureFlagOn
 import com.facebook.react.views.view.setStatusBarTranslucency
-import com.facebook.yoga.annotations.DoNotStrip
 
 /**
  * ReactModalHostView is a view that sits in the view hierarchy representing a Modal view.
@@ -72,7 +68,6 @@ import com.facebook.yoga.annotations.DoNotStrip
  *    addition and removal of views to the DialogRootViewGroup.
  */
 @SuppressLint("ViewConstructor")
-@DoNotStrip
 public class ReactModalHostView(context: ThemedReactContext) :
     ViewGroup(context), LifecycleEventListener {
 
@@ -131,7 +126,6 @@ public class ReactModalHostView(context: ThemedReactContext) :
   private var createNewDialog = false
 
   init {
-    initStatusBarHeight(context)
     dialogRootViewGroup = DialogRootViewGroup(context)
   }
 
@@ -484,26 +478,6 @@ public class ReactModalHostView(context: ThemedReactContext) :
 
   private companion object {
     private const val TAG = "ReactModalHost"
-
-    // We store the status bar height to be able to properly position
-    // the modal on the first render.
-    private var statusBarHeight = 0
-
-    private fun initStatusBarHeight(reactContext: ReactContext) {
-      statusBarHeight = getStatusBarHeightPx(reactContext.currentActivity)
-    }
-
-    @JvmStatic
-    @DoNotStrip
-    private fun getScreenDisplayMetricsWithoutInsets(): Long {
-      val displayMetrics = DisplayMetricsHolder.getScreenDisplayMetrics()
-      return encodeFloatsToLong(
-          displayMetrics.widthPixels.toFloat().pxToDp(),
-          (displayMetrics.heightPixels - statusBarHeight).toFloat().pxToDp())
-    }
-
-    private fun encodeFloatsToLong(width: Float, height: Float): Long =
-        (width.toRawBits().toLong()) shl 32 or (height.toRawBits().toLong())
   }
 
   /**

packages/react-native/ReactCommon/react/renderer/components/modal/ModalHostViewComponentDescriptor.cpp

@@ -0,0 +1,48 @@
+/*
+ * 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.
+ */
+
+#include "ModalHostViewComponentDescriptor.h"
+
+namespace facebook::react {
+
+#ifdef ANDROID
+State::Shared ModalHostViewComponentDescriptor::createInitialState(
+    const Props::Shared& props,
+    const ShadowNodeFamily::Shared& family) const {
+  // For Android, we need to get the size of the screen without the vertical
+  // insets to correctly position the modal on the first rendering.
+  // For this reason we provide the `createInitialState` implementation
+  // that will query FabricUIManager for the size of the screen without
+  // vertical insets.
+
+  int surfaceId = family->getSurfaceId();
+
+  const jni::global_ref<jobject>& fabricUIManager =
+      contextContainer_->at<jni::global_ref<jobject>>("FabricUIManager");
+
+  static auto getEncodedScreenSizeWithoutVerticalInsets =
+      jni::findClassStatic(UIManagerJavaDescriptor)
+          ->getMethod<jlong(jint)>("getEncodedScreenSizeWithoutVerticalInsets");
+
+  auto result =
+      getEncodedScreenSizeWithoutVerticalInsets(fabricUIManager, surfaceId);
+
+  // Inspired from yogaMeasureToSize from conversions.h
+  int32_t wBits = 0xFFFFFFFF & (result >> 32);
+  int32_t hBits = 0xFFFFFFFF & result;
+
+  auto* measuredWidth = reinterpret_cast<float*>(&wBits);
+  auto* measuredHeight = reinterpret_cast<float*>(&hBits);
+
+  return std::make_shared<ModalHostViewShadowNode::ConcreteState>(
+      std::make_shared<const ModalHostViewState>(ModalHostViewState(
+          Size{.width = *measuredWidth, .height = *measuredHeight})),
+      family);
+}
+#endif // ANDROID
+
+} // namespace facebook::react

packages/react-native/ReactCommon/react/renderer/components/modal/ModalHostViewComponentDescriptor.h

@@ -37,6 +37,16 @@ class ModalHostViewComponentDescriptor final
 
     ConcreteComponentDescriptor::adopt(shadowNode);
   }
+
+#ifdef ANDROID
+  State::Shared createInitialState(
+      const Props::Shared& props,
+      const ShadowNodeFamily::Shared& family) const override;
+#endif // ANDROID
+
+ private:
+  constexpr static auto UIManagerJavaDescriptor =
+      "com/facebook/react/fabric/FabricUIManager";
 };
 
 } // namespace facebook::react

packages/react-native/ReactCommon/react/renderer/components/modal/platform/android/JReactModalHostView.h

@@ -7,12 +7,11 @@
 
 #include <react/renderer/components/modal/ModalHostViewUtils.h>
 #include <react/renderer/graphics/Size.h>
-#include "JReactModalHostView.h"
 
 namespace facebook::react {
 
 Size ModalHostViewScreenSize() {
-  return JReactModalHostView::getDisplayMetrics();
+  return Size{0, 0};
 }
 
 } // namespace facebook::react