[Fabric] Fix modal height (#14343)

* fix modal height

* Change files

* reverse change

* add override

change/react-native-windows-d345ae30-34cd-425c-97ac-fdf1c22fc508.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix modal height",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/@react-native-windows/tester/overrides.json

@@ -75,6 +75,12 @@
       "baseHash": "e840e1c091d2644d0a682b8baffad3b3dda2b207",
       "issue": 12869
     },
+    {
+      "type": "patch",
+      "file": "src/js/examples/Modal/ModalOnShow.windows.js",
+      "baseFile": "packages/rn-tester/js/examples/Modal/ModalOnShow.js",
+      "baseHash": "911507abcf9172b5fdd1bb68faaf02562df704d4"
+    },
     {
       "type": "patch",
       "file": "src/js/examples/Modal/ModalPresentation.windows.js",

packages/@react-native-windows/tester/src/js/examples/Modal/ModalOnShow.windows.js

@@ -0,0 +1,141 @@
+/**
+ * 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.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
+
+import RNTesterText from '../../components/RNTesterText';
+import * as React from 'react';
+import {useState} from 'react';
+import {Modal, Pressable, StyleSheet, Text, View} from 'react-native';
+
+function ModalOnShowOnDismiss(): React.Node {
+  const [modalShowComponent, setModalShowComponent] = useState(true);
+  const [modalVisible, setModalVisible] = useState(false);
+  const [onShowCount, setOnShowCount] = useState(0);
+  const [onDismissCount, setOnDismissCount] = useState(0);
+
+  return (
+    <View style={styles.container}>
+      {modalShowComponent && (
+        <Modal
+          animationType="slide"
+          transparent={true}
+          visible={modalVisible}
+          onShow={() => {
+            setOnShowCount(showCount => showCount + 1);
+          }}
+          onDismiss={() => {
+            setOnDismissCount(dismissCount => dismissCount + 1);
+          }}
+          onRequestClose={() => {
+            setModalVisible(false);
+          }}>
+          <View style={[styles.centeredView, styles.modalBackdrop]}>
+            <View style={styles.modalView}>
+              <Text testID="modal-on-show-count">
+                onShow is called {onShowCount} times
+              </Text>
+              <Text testID="modal-on-dismiss-count">
+                onDismiss is called {onDismissCount} times
+              </Text>
+              <Pressable
+                style={[styles.button, styles.buttonClose]}
+                onPress={() => setModalVisible(false)}>
+                <Text testID="dismiss-modal" style={styles.textStyle}>
+                  Hide modal by setting visible to false
+                </Text>
+              </Pressable>
+              <Pressable
+                style={[styles.button, styles.buttonClose]}
+                onPress={() => setModalShowComponent(false)}>
+                <Text
+                  testID="dismiss-modal-by-removing-component"
+                  style={styles.textStyle}>
+                  Hide modal by removing component
+                </Text>
+              </Pressable>
+            </View>
+          </View>
+        </Modal>
+      )}
+      <RNTesterText testID="on-show-count">
+        onShow is called {onShowCount} times
+      </RNTesterText>
+      <RNTesterText testID="on-dismiss-count">
+        onDismiss is called {onDismissCount} times
+      </RNTesterText>
+      <Pressable
+        style={[styles.button, styles.buttonOpen]}
+        onPress={() => {
+          setModalShowComponent(true);
+          setModalVisible(true);
+        }}>
+        <Text testID="open-modal" style={styles.textStyle}>
+          Show Modal
+        </Text>
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    display: 'flex',
+    alignItems: 'center',
+    paddingVertical: 30,
+  },
+  centeredView: {
+    // flex: 1, // [Windows] - This will cause the modal to stretch to be as tall as the availiable space given to it.
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalBackdrop: {
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  modalView: {
+    margin: 20,
+    borderRadius: 20,
+    padding: 35,
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  button: {
+    borderRadius: 20,
+    padding: 10,
+    marginVertical: 20,
+    elevation: 2,
+  },
+  buttonOpen: {
+    backgroundColor: '#F194FF',
+  },
+  buttonClose: {
+    backgroundColor: '#2196F3',
+  },
+  textStyle: {
+    color: 'white',
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+});
+
+export default ({
+  title: "Modal's onShow/onDismiss",
+  name: 'onShow',
+  description:
+    'onShow and onDismiss (iOS only) callbacks are called when a modal is shown/dismissed',
+  render: (): React.Node => <ModalOnShowOnDismiss />,
+}: RNTesterModuleExample);

vnext/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.cpp

@@ -167,10 +167,13 @@ struct ModalHostView : public winrt::implements<ModalHostView, winrt::Windows::F
         static_cast<int32_t>(layoutMetrics.Frame.Height * (layoutMetrics.PointScaleFactor))};
     m_popUp.MoveAndResize(rect2);
 #else
+    // Fix for https://github.com/microsoft/microsoft-ui-xaml/issues/9529
+    auto titleBarHeight = m_window.TitleBar().Height();
+
     // Adjust window position and size
     m_window.ResizeClient(
         {static_cast<int32_t>(layoutMetrics.Frame.Width * (layoutMetrics.PointScaleFactor)),
-         static_cast<int32_t>(layoutMetrics.Frame.Height * (layoutMetrics.PointScaleFactor))});
+         static_cast<int32_t>(layoutMetrics.Frame.Height * (layoutMetrics.PointScaleFactor)) - titleBarHeight});
     m_window.Move({xCor, yCor});
 #endif
   };