Correctly create the first modal state

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,13 @@ 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

@@ -10,16 +10,20 @@ package com.facebook.react.uimanager
 import android.app.Activity
 import android.content.Context
 import android.util.DisplayMetrics
+import android.util.Log
 import android.view.WindowManager
 import androidx.core.view.ViewCompat
 import androidx.core.view.WindowInsetsCompat
 import com.facebook.react.bridge.WritableMap
 import com.facebook.react.bridge.WritableNativeMap
+import com.facebook.react.uimanager.PixelUtil.pxToDp
+import com.facebook.yoga.annotations.DoNotStrip
 
 /**
  * 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 +115,24 @@ 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,7 +49,6 @@ 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
@@ -131,7 +128,6 @@ public class ReactModalHostView(context: ThemedReactContext) :
   private var createNewDialog = false
 
   init {
-    initStatusBarHeight(context)
     dialogRootViewGroup = DialogRootViewGroup(context)
   }
 
@@ -484,26 +480,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.h

@@ -37,6 +37,39 @@ class ModalHostViewComponentDescriptor final
 
     ConcreteComponentDescriptor::adopt(shadowNode);
   }
+
+#ifdef ANDROID
+  virtual State::Shared createInitialState(
+      const Props::Shared& props,
+      const ShadowNodeFamily::Shared& family) const override {
+    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
+
+ 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