From 14de1b708a637313f34aa0806e5c6f0ea6bb7417 Mon Sep 17 00:00:00 2001
From: zhongwuzw <zhongwuzw@qq.com>
Date: Thu, 18 Jul 2024 10:08:50 -0700
Subject: [PATCH] Fabric: Fixes Modal present splash when animation type is
 none (#41853)

Summary:
Because the modal layout is triggered by state,  it's an async operation after the first mount, so we can see the splash when present modal. now we can pass the screen size to the initial state which can layout in the first mount operation.

before:
https://github.com/facebook/react-native/assets/5061845/a39d519e-e2f6-42f1-8319-6216c88e9cf3

After:
https://github.com/facebook/react-native/assets/5061845/c7d59820-399b-4ea2-943d-d889971ea7ee

## Changelog:

[IOS] [FIXED] - Fabric: Fixes Modal present splash when animation type is none

Pull Request resolved: https://github.com/facebook/react-native/pull/41853

Test Plan: RNTester Modal example, present modal in none animation mode.

Reviewed By: sammy-SC

Differential Revision: D51984766

Pulled By: cipolleschi

fbshipit-source-id: 34a40e75c87f1046ab2e4df45196a277f47bd525
---
 .../components/modal/ModalHostViewState.h     | 11 +++++++++-
 .../components/modal/ModalHostViewUtils.h     | 16 +++++++++++++++
 .../components/modal/ModalHostViewUtils.mm    | 20 +++++++++++++++++++
 3 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 packages/react-native/ReactCommon/react/renderer/components/modal/ModalHostViewUtils.h
 create mode 100644 packages/react-native/ReactCommon/react/renderer/components/modal/ModalHostViewUtils.mm

diff --git a/packages/react-native/ReactCommon/react/renderer/components/modal/ModalHostViewState.h b/packages/react-native/ReactCommon/react/renderer/components/modal/ModalHostViewState.h
index 9a12bdef2cd..2b713926dd5 100644
--- a/packages/react-native/ReactCommon/react/renderer/components/modal/ModalHostViewState.h
+++ b/packages/react-native/ReactCommon/react/renderer/components/modal/ModalHostViewState.h
@@ -14,6 +14,10 @@
 #include <folly/dynamic.h>
 #endif
 
+#if defined(__APPLE__) && TARGET_OS_IOS
+#include "ModalHostViewUtils.h"
+#endif
+
 namespace facebook::react {
 
 /*
@@ -23,7 +27,12 @@ class ModalHostViewState final {
  public:
   using Shared = std::shared_ptr<const ModalHostViewState>;
 
-  ModalHostViewState(){};
+#if defined(__APPLE__) && TARGET_OS_IOS
+  ModalHostViewState() : screenSize(RCTModalHostViewScreenSize()) {
+#else
+  ModalHostViewState(){
+#endif
+  };
   ModalHostViewState(Size screenSize_) : screenSize(screenSize_){};
 
 #ifdef ANDROID
diff --git a/packages/react-native/ReactCommon/react/renderer/components/modal/ModalHostViewUtils.h b/packages/react-native/ReactCommon/react/renderer/components/modal/ModalHostViewUtils.h
new file mode 100644
index 00000000000..fc038ad33de
--- /dev/null
+++ b/packages/react-native/ReactCommon/react/renderer/components/modal/ModalHostViewUtils.h
@@ -0,0 +1,16 @@
+/*
+ * 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 <react/renderer/core/graphicsConversions.h>
+
+namespace facebook::react {
+
+Size RCTModalHostViewScreenSize(void);
+
+} // namespace facebook::react
diff --git a/packages/react-native/ReactCommon/react/renderer/components/modal/ModalHostViewUtils.mm b/packages/react-native/ReactCommon/react/renderer/components/modal/ModalHostViewUtils.mm
new file mode 100644
index 00000000000..d2c3560dca8
--- /dev/null
+++ b/packages/react-native/ReactCommon/react/renderer/components/modal/ModalHostViewUtils.mm
@@ -0,0 +1,20 @@
+/*
+ * 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.
+ */
+
+#import "ModalHostViewUtils.h"
+#import <Foundation/Foundation.h>
+#import <React/RCTUtils.h>
+
+namespace facebook::react {
+
+Size RCTModalHostViewScreenSize(void)
+{
+  CGSize screenSize = RCTScreenSize();
+  return {screenSize.width, screenSize.height};
+}
+
+} // namespace facebook::react