Fix Modal first frame being rendered on top-left corner (#51048)

Summary: Pull Request resolved: #51048 Fixes #50442 Closes #50704 Users reported that Modals on Android are first renderer anchored in 0,0. That results in them being on the top left corner of the screen for some seconds. This is happening because the native state of the Modal on Android as width/height set at 0,0 - which we then update in a subsequent callback. I'm fixing this by making sure we render the Modal the first time with the right screen size - the status bar size Changelog: [Android] [Fixed] - Fix Modal first frame being rendered on top-left corner Differential Revision: D73948178

Author: cortinico

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

@@ -26,6 +26,7 @@ import android.view.accessibility.AccessibilityEvent
 import android.view.accessibility.AccessibilityNodeInfo
 import android.widget.FrameLayout
 import androidx.annotation.UiThread
+import androidx.core.view.ViewCompat
 import androidx.core.view.WindowInsetsCompat
 import androidx.core.view.WindowInsetsControllerCompat
 import com.facebook.common.logging.FLog
@@ -40,6 +41,7 @@ import com.facebook.react.common.ReactConstants
 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.JSPointerDispatcher
 import com.facebook.react.uimanager.JSTouchDispatcher
 import com.facebook.react.uimanager.PixelUtil.pxToDp
@@ -52,6 +54,7 @@ import com.facebook.react.views.common.ContextUtils
 import com.facebook.react.views.view.ReactViewGroup
 import com.facebook.react.views.view.setStatusBarTranslucency
 import com.facebook.react.views.view.setSystemBarsTranslucency
+import com.facebook.yoga.annotations.DoNotStrip
 import java.util.Objects
 
 /**
@@ -122,6 +125,7 @@ public class ReactModalHostView(context: ThemedReactContext) :
  private var createNewDialog = false
 
  init {
+ initStatusBarHeight(context)
  dialogRootViewGroup = DialogRootViewGroup(context)
  }
 
@@ -431,6 +435,18 @@ public class ReactModalHostView(context: ThemedReactContext) :
  }
  }
 
+ private fun initStatusBarHeight(reactContext: ReactContext) {
+ val windowInsets =
+ reactContext.getCurrentActivity()?.window?.decorView?.let(ViewCompat::getRootWindowInsets)
+ statusBarHeight =
+ windowInsets
+ ?.getInsets(
+ WindowInsetsCompat.Type.statusBars() or
+ WindowInsetsCompat.Type.navigationBars() or
+ WindowInsetsCompat.Type.displayCutout())
+ ?.top ?: 0
+ }
+
  /**
  * Sets the testID on the DialogRootViewGroup. Since the accessibility events are not triggered on
  * the on the ReactModalHostView, the testID is forwarded to the DialogRootViewGroup to set the
@@ -449,6 +465,19 @@ 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
+
+ @JvmStatic
+ @DoNotStrip
+ private fun getScreenDisplayMetricsWithoutInsets(): FloatArray {
+ val displayMetrics = DisplayMetricsHolder.getScreenDisplayMetrics()
+ return floatArrayOf(
+ displayMetrics.widthPixels.toFloat().pxToDp(),
+ (displayMetrics.heightPixels - statusBarHeight).toFloat().pxToDp())
+ }
  }
 
  /**
@@ -464,6 +493,7 @@ public class ReactModalHostView(context: ThemedReactContext) :
  */
  public class DialogRootViewGroup internal constructor(context: Context) :
  ReactViewGroup(context), RootView {
+
  internal var stateWrapper: StateWrapper? = null
  internal var eventDispatcher: EventDispatcher? = null
 

packages/react-native/ReactCommon/react/renderer/components/modal/CMakeLists.txt

@@ -8,7 +8,10 @@ set(CMAKE_VERBOSE_MAKEFILE on)
 
 include(${REACT_COMMON_DIR}/cmake-utils/react-native-flags.cmake)
 
-file(GLOB rrc_modal_SRC CONFIGURE_DEPENDS *.cpp)
+file(GLOB rrc_modal_SRC CONFIGURE_DEPENDS
+ *.cpp
+ platform/android/*.cpp)
+
 add_library(rrc_modal STATIC ${rrc_modal_SRC})
 
 target_include_directories(rrc_modal PUBLIC ${REACT_COMMON_DIR})

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

@@ -9,15 +9,12 @@
 
 #include <react/renderer/core/graphicsConversions.h>
 #include <react/renderer/graphics/Float.h>
+#include "ModalHostViewUtils.h"
 
 #ifdef ANDROID
 #include <folly/dynamic.h>
 #endif
 
-#if defined(__APPLE__) && TARGET_OS_IOS
-#include "ModalHostViewUtils.h"
-#endif
-
 namespace facebook::react {
 
 /*
@@ -27,12 +24,7 @@ class ModalHostViewState final {
  public:
  using Shared = std::shared_ptr<const ModalHostViewState>;
 
-#if defined(__APPLE__) && TARGET_OS_IOS
- ModalHostViewState() : screenSize(RCTModalHostViewScreenSize()) {
-#else
- ModalHostViewState(){
-#endif
- };
+ ModalHostViewState() : screenSize(RCTModalHostViewScreenSize()) {}
  ModalHostViewState(Size screenSize_) : screenSize(screenSize_){};
 
 #ifdef ANDROID

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

@@ -7,7 +7,7 @@
 
 #pragma once
 
-#include <react/renderer/core/graphicsConversions.h>
+#include <react/renderer/graphics/Size.h>
 
 namespace facebook::react {
 

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

@@ -0,0 +1,35 @@
+/*
+ * 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.
+ */
+
+#pragma once
+
+#include <fbjni/fbjni.h>
+#include <react/renderer/graphics/Size.h>
+
+#include <android/log.h>
+
+namespace facebook::react {
+
+class JReactModalHostView
+ : public facebook::jni::JavaClass<JReactModalHostView> {
+ public:
+ static auto constexpr kJavaDescriptor =
+ "Lcom/facebook/react/views/modal/ReactModalHostView;";
+
+ static Size getDisplayMetrics() {
+ static auto method = JReactModalHostView::javaClassStatic()
+ ->getStaticMethod<jni::JArrayFloat()>(
+ "getScreenDisplayMetricsWithoutInsets");
+ auto result = method(javaClassStatic());
+ size_t size = result->size();
+ std::vector<jfloat> elements(size + 1L);
+ result->getRegion(0, size, elements.data());
+ return Size{elements[0], elements[1]};
+ }
+};
+
+} // namespace facebook::react

packages/react-native/ReactCommon/react/renderer/components/modal/platform/android/ModalHostViewUtils.cpp

@@ -0,0 +1,17 @@
+/*
+ * 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 <react/renderer/components/modal/ModalHostViewUtils.h>
+#include "JReactModalHostView.h"
+
+namespace facebook::react {
+
+Size RCTModalHostViewScreenSize(void) {
+ return JReactModalHostView::getDisplayMetrics();
+}
+
+} // namespace facebook::react