diff --git a/change/react-native-windows-d345ae30-34cd-425c-97ac-fdf1c22fc508.json b/change/react-native-windows-d345ae30-34cd-425c-97ac-fdf1c22fc508.json
new file mode 100644
index 00000000000..3fdd2163ee7
--- /dev/null
+++ b/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": "tatianakapos@microsoft.com",
+ "dependentChangeType": "patch"
+}
diff --git a/packages/@react-native-windows/tester/overrides.json b/packages/@react-native-windows/tester/overrides.json
index 36ce2283280..cf58f53b51c 100644
--- a/packages/@react-native-windows/tester/overrides.json
+++ b/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",
diff --git a/packages/@react-native-windows/tester/src/js/examples/Modal/ModalOnShow.windows.js b/packages/@react-native-windows/tester/src/js/examples/Modal/ModalOnShow.windows.js
new file mode 100644
index 00000000000..7490c24d868
--- /dev/null
+++ b/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 (
+
+ {modalShowComponent && (
+ {
+ setOnShowCount(showCount => showCount + 1);
+ }}
+ onDismiss={() => {
+ setOnDismissCount(dismissCount => dismissCount + 1);
+ }}
+ onRequestClose={() => {
+ setModalVisible(false);
+ }}>
+
+
+
+ onShow is called {onShowCount} times
+
+
+ onDismiss is called {onDismissCount} times
+
+ setModalVisible(false)}>
+
+ Hide modal by setting visible to false
+
+
+ setModalShowComponent(false)}>
+
+ Hide modal by removing component
+
+
+
+
+
+ )}
+
+ onShow is called {onShowCount} times
+
+
+ onDismiss is called {onDismissCount} times
+
+ {
+ setModalShowComponent(true);
+ setModalVisible(true);
+ }}>
+
+ Show Modal
+
+
+
+ );
+}
+
+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 => ,
+}: RNTesterModuleExample);
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.cpp
index 0c7728bd853..7fc57f309b0 100644
--- a/vnext/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.cpp
+++ b/vnext/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.cpp
@@ -167,10 +167,13 @@ struct ModalHostView : public winrt::implements(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(layoutMetrics.Frame.Width * (layoutMetrics.PointScaleFactor)),
- static_cast(layoutMetrics.Frame.Height * (layoutMetrics.PointScaleFactor))});
+ static_cast(layoutMetrics.Frame.Height * (layoutMetrics.PointScaleFactor)) - titleBarHeight});
m_window.Move({xCor, yCor});
#endif
};