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

Summary: 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 Reviewed By: javache Differential Revision: D73948178

Author: cortinico

packages/react-native/Package.swift

@@ -416,6 +416,8 @@ let reactFabricComponents = RNTarget(
  name: .reactFabricComponents,
  path: "ReactCommon/react/renderer",
  excludedPaths: [
+ "components/modal/platform/android",
+ "components/modal/platform/cxx",
  "components/view/platform/android",
  "components/view/platform/windows",
  "components/view/platform/macos",

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/modules/statusbar/StatusBarModule.kt

@@ -13,8 +13,6 @@ import android.os.Build
 import android.view.View
 import android.view.WindowInsetsController
 import android.view.WindowManager
-import androidx.core.view.ViewCompat
-import androidx.core.view.WindowInsetsCompat
 import com.facebook.common.logging.FLog
 import com.facebook.fbreact.specs.NativeStatusBarManagerAndroidSpec
 import com.facebook.react.bridge.GuardedRunnable
@@ -23,6 +21,7 @@ import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.bridge.UiThreadUtil
 import com.facebook.react.common.ReactConstants
 import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.DisplayMetricsHolder.getStatusBarHeightPx
 import com.facebook.react.uimanager.PixelUtil
 import com.facebook.react.views.view.setStatusBarTranslucency
 import com.facebook.react.views.view.setStatusBarVisibility
@@ -34,32 +33,17 @@ internal class StatusBarModule(reactContext: ReactApplicationContext?) :
 
  @Suppress("DEPRECATION")
  override fun getTypedExportedConstants(): Map<String, Any> {
+ val currentActivity = reactApplicationContext.currentActivity
  val statusBarColor =
- reactApplicationContext.getCurrentActivity()?.window?.statusBarColor?.let { color ->
+ currentActivity?.window?.statusBarColor?.let { color ->
  String.format("#%06X", 0xFFFFFF and color)
  } ?: "black"
  return mapOf(
- HEIGHT_KEY to PixelUtil.toDIPFromPixel(getStatusBarHeightPx()),
+ HEIGHT_KEY to PixelUtil.toDIPFromPixel(getStatusBarHeightPx(currentActivity).toFloat()),
  DEFAULT_BACKGROUND_COLOR_KEY to statusBarColor,
  )
  }
 
- private fun getStatusBarHeightPx(): Float {
- val windowInsets =
- reactApplicationContext
- .getCurrentActivity()
- ?.window
- ?.decorView
- ?.let(ViewCompat::getRootWindowInsets) ?: return 0f
- return windowInsets
- .getInsets(
- WindowInsetsCompat.Type.statusBars() or
- WindowInsetsCompat.Type.navigationBars() or
- WindowInsetsCompat.Type.displayCutout())
- .top
- .toFloat()
- }
-
  @Suppress("DEPRECATION")
  override fun setColor(colorDouble: Double, animated: Boolean) {
  val color = colorDouble.toInt()

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

@@ -7,9 +7,12 @@
 
 package com.facebook.react.uimanager
 
+import android.app.Activity
 import android.content.Context
 import android.util.DisplayMetrics
 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
 
@@ -98,4 +101,14 @@ public object DisplayMetricsHolder {
  putDouble("fontScale", fontScale)
  putDouble("densityDpi", displayMetrics.densityDpi.toDouble())
  }
+
+ internal fun getStatusBarHeightPx(activity: Activity?): Int {
+ val windowInsets = activity?.window?.decorView?.let(ViewCompat::getRootWindowInsets) ?: return 0
+ return windowInsets
+ .getInsets(
+ WindowInsetsCompat.Type.statusBars() or
+ WindowInsetsCompat.Type.navigationBars() or
+ WindowInsetsCompat.Type.displayCutout())
+ .top
+ }
 }

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

@@ -40,6 +40,8 @@ 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
@@ -53,6 +55,7 @@ import com.facebook.react.views.modal.ReactModalHostView.DialogRootViewGroup
 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
 
 /**
  * ReactModalHostView is a view that sits in the view hierarchy representing a Modal view.
@@ -122,6 +125,7 @@ public class ReactModalHostView(context: ThemedReactContext) :
  private var createNewDialog = false
 
  init {
+ initStatusBarHeight(context)
  dialogRootViewGroup = DialogRootViewGroup(context)
  }
 
@@ -461,6 +465,26 @@ 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())
  }
 
  /**
@@ -476,6 +500,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-FabricComponents.podspec

@@ -89,7 +89,7 @@ Pod::Spec.new do |s|
  end
 
  ss.subspec "modal" do |sss|
- sss.source_files = "react/renderer/components/modal/**/*.{m,mm,cpp,h}"
+ sss.source_files = "react/renderer/components/modal/*.{m,mm,cpp,h}"
  sss.exclude_files = "react/renderer/components/modal/tests"
  sss.header_dir = "react/renderer/components/modal"
  end

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/ModalHostViewComponentDescriptor.h

@@ -30,8 +30,9 @@ class ModalHostViewComponentDescriptor final
  *shadowNode.getState())
  .getData();
 
- layoutableShadowNode.setSize(
- Size{stateData.screenSize.width, stateData.screenSize.height});
+ layoutableShadowNode.setSize(Size{
+ .width = stateData.screenSize.width,
+ .height = stateData.screenSize.height});
  layoutableShadowNode.setPositionType(YGPositionTypeAbsolute);
 
  ConcreteComponentDescriptor::adopt(shadowNode);

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 RN_SERIALIZABLE_STATE
 #include <folly/dynamic.h>
 #endif
 
-#if defined(__APPLE__) && TARGET_OS_IOS
-#include "ModalHostViewUtils.h"
-#endif
-
 namespace facebook::react {
 
 /*
@@ -27,21 +24,16 @@ 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(ModalHostViewScreenSize()) {}
  ModalHostViewState(Size screenSize_) : screenSize(screenSize_){};
 
 #ifdef RN_SERIALIZABLE_STATE
  ModalHostViewState(
  const ModalHostViewState& previousState,
  folly::dynamic data)
  : screenSize(Size{
- (Float)data["screenWidth"].getDouble(),
- (Float)data["screenHeight"].getDouble()}){};
+ .width = (Float)data["screenWidth"].getDouble(),
+ .height = (Float)data["screenHeight"].getDouble()}){};
 #endif
 
  const Size screenSize{};

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

@@ -7,10 +7,10 @@
 
 #pragma once
 
-#include <react/renderer/core/graphicsConversions.h>
+#include <react/renderer/graphics/Size.h>
 
 namespace facebook::react {
 
-Size RCTModalHostViewScreenSize(void);
+Size ModalHostViewScreenSize(void);
 
 } // namespace facebook::react

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

@@ -11,7 +11,7 @@
 
 namespace facebook::react {
 
-Size RCTModalHostViewScreenSize(void)
+Size ModalHostViewScreenSize(void)
 {
  CGSize screenSize = RCTScreenSize();
  return {screenSize.width, screenSize.height};