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 };