From af6a1964576694639c380256242a85649679342c Mon Sep 17 00:00:00 2001 From: Abhijeet Jha Date: Fri, 2 May 2025 10:07:43 +0530 Subject: [PATCH 1/9] addded titlebar , title handling , X handling , resizable --- .../WindowsModalHostViewComponentView.cpp | 99 ++++++++++- .../components/rnwcore/ModalHostView.g.h | 6 +- .../react/components/rnwcore/Props.cpp | 3 +- .../codegen/react/components/rnwcore/Props.h | 1 + vnext/overrides.json | 14 ++ vnext/src-win/Libraries/Modal/Modal.d.ts | 123 ++++++++++++++ .../src-win/Libraries/Modal/Modal.windows.js | 10 +- ...RCTModalHostViewNativeComponent.windows.js | 155 ++++++++++++++++++ 8 files changed, 406 insertions(+), 5 deletions(-) create mode 100644 vnext/src-win/Libraries/Modal/Modal.d.ts create mode 100644 vnext/src-win/src/private/specs/components/RCTModalHostViewNativeComponent.windows.js diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.cpp index f17f5b198a3..8331db509d7 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.cpp @@ -11,6 +11,9 @@ #include #include #include +#include +#include +#include namespace winrt::Microsoft::ReactNative::Composition::implementation { @@ -39,6 +42,12 @@ struct ModalHostView : public winrt::implements &newProps, const winrt::com_ptr<::Microsoft::ReactNativeSpecs::ModalHostViewProps> &oldProps) noexcept override { - if (!oldProps || newProps->visible != oldProps->visible) { + // Store the props locally + m_localProps = newProps; + + const auto &oldViewProps = *oldProps; + const auto &newViewProps = *newProps; + + if (!oldProps || newViewProps.visible != oldViewProps.visible) { if (newProps->visible.value_or(true)) { m_visible = true; // We do not immediately show the window, since we want to resize/position @@ -79,6 +94,16 @@ struct ModalHostView : public winrt::implements::UpdateProps(view, newProps, oldProps); } @@ -142,6 +167,7 @@ struct ModalHostView : public winrt::implements(layoutMetrics.Frame.Width * (layoutMetrics.PointScaleFactor)), static_cast(layoutMetrics.Frame.Height * (layoutMetrics.PointScaleFactor))}; + + // Log the dimensions for debugging + OutputDebugStringW(L"[ModalHostView] AdjustWindowSize Resizing to: "); + OutputDebugStringW((winrt::to_hstring(rect2.Width) + L"x" + winrt::to_hstring(rect2.Height) + L"\n").c_str()); + m_popUp.MoveAndResize(rect2); }; @@ -199,6 +230,12 @@ struct ModalHostView : public winrt::implements() .Root() .ReactNativeIsland() .Island()); m_popUp.Connect(contentIsland); + // Get AppWindow and configure presenter + m_appWindow = winrt::Microsoft::UI::Windowing::AppWindow::GetFromWindowId(m_popUp.WindowId()); + if (m_appWindow) { + // Log the initial presenter type + OutputDebugStringW(L"[ModalHostView] AppWindow Presenter Kind: "); + OutputDebugStringW(winrt::to_hstring((int32_t)m_appWindow.Presenter().Kind()).c_str()); + OutputDebugStringW(L"\n"); + auto overlappedPresenter = winrt::Microsoft::UI::Windowing::OverlappedPresenter::Create(); + + // Configure presenter for modal behavior + overlappedPresenter.IsModal(true); + overlappedPresenter.IsResizable(true); + overlappedPresenter.SetBorderAndTitleBar(true, true); + + // Apply the presenter to the window + m_appWindow.SetPresenter(overlappedPresenter); + OutputDebugStringW(L"[ModalHostView] Created and set new OverlappedPresenter.\n"); + + // Set initial title using the stored local props + if (m_localProps) { + winrt::hstring titleValue = winrt::to_hstring(m_localProps->title.value_or("RNW Modal")); + OutputDebugStringW(L"[ModalHostView] Setting initial title: "); + OutputDebugStringW(titleValue.c_str()); + OutputDebugStringW(L"\n"); + + m_appWindow.Title(titleValue); + + // Double check if the title was set + OutputDebugStringW(L"[ModalHostView] Current window title: "); + OutputDebugStringW(m_appWindow.Title().c_str()); + OutputDebugStringW(L"\n"); + } else { + OutputDebugStringW(L"[ModalHostView] Setting default title (no props yet).\n"); + m_appWindow.Title(L"RNW Modal"); // Set a default title + } + + // Handle close request ('X' button) + m_appWindowClosingToken = m_appWindow.Closing( + [wkThis = get_weak()]( + const winrt::Microsoft::UI::Windowing::AppWindow & /*sender*/, + const winrt::Microsoft::UI::Windowing::AppWindowClosingEventArgs &args) { + OutputDebugStringW(L"[ModalHostView] AppWindow Closing event received.\n"); + args.Cancel(true); // Prevent default close + if (auto strongThis = wkThis.get()) { + // Dispatch onRequestClose event + if (auto eventEmitter = strongThis->EventEmitter()) { + OutputDebugStringW(L"[ModalHostView] Dispatching onRequestClose event.\n"); + ::Microsoft::ReactNativeSpecs::ModalHostViewEventEmitter::OnRequestClose eventArgs; + eventEmitter->onRequestClose(eventArgs); + } + } + }); + } else { + OutputDebugStringW(L"[ModalHostView] Failed to get AppWindow from WindowId.\n"); + } + // set the top-level windows as the new hwnd winrt::Microsoft::ReactNative::ReactCoreInjection::SetTopLevelWindowId( view.ReactContext().Properties(), @@ -321,6 +413,9 @@ struct ModalHostView : public winrt::implements m_localProps{nullptr}; }; void RegisterWindowsModalHostNativeComponent( diff --git a/vnext/codegen/react/components/rnwcore/ModalHostView.g.h b/vnext/codegen/react/components/rnwcore/ModalHostView.g.h index 2d7cf10c5d2..4d93b8d85b7 100644 --- a/vnext/codegen/react/components/rnwcore/ModalHostView.g.h +++ b/vnext/codegen/react/components/rnwcore/ModalHostView.g.h @@ -34,7 +34,8 @@ struct ModalHostViewProps : winrt::implementsvisible; animated = cloneFromProps->animated; supportedOrientations = cloneFromProps->supportedOrientations; - identifier = cloneFromProps->identifier; + identifier = cloneFromProps->identifier; + title = cloneFromProps->title; } } @@ -72,6 +73,9 @@ struct ModalHostViewProps : winrt::implements identifier{}; + REACT_FIELD(title) + std::optional title; + const winrt::Microsoft::ReactNative::ViewProps ViewProps; }; diff --git a/vnext/codegen/react/components/rnwcore/Props.cpp b/vnext/codegen/react/components/rnwcore/Props.cpp index a46bf56b211..3d33bfb0980 100644 --- a/vnext/codegen/react/components/rnwcore/Props.cpp +++ b/vnext/codegen/react/components/rnwcore/Props.cpp @@ -122,7 +122,8 @@ ModalHostViewProps::ModalHostViewProps( visible(convertRawProp(context, rawProps, "visible", sourceProps.visible, {false})), animated(convertRawProp(context, rawProps, "animated", sourceProps.animated, {false})), supportedOrientations(convertRawProp(context, rawProps, "supportedOrientations", ModalHostViewSupportedOrientationsMaskWrapped{ .value = sourceProps.supportedOrientations }, {static_cast(ModalHostViewSupportedOrientations::Portrait)}).value), - identifier(convertRawProp(context, rawProps, "identifier", sourceProps.identifier, {0})) + identifier(convertRawProp(context, rawProps, "identifier", sourceProps.identifier, {0})), + title(convertRawProp(context, rawProps, "title", sourceProps.title, {})) {} SafeAreaViewProps::SafeAreaViewProps( const PropsParserContext &context, diff --git a/vnext/codegen/react/components/rnwcore/Props.h b/vnext/codegen/react/components/rnwcore/Props.h index 82909907d12..397bc1706cb 100644 --- a/vnext/codegen/react/components/rnwcore/Props.h +++ b/vnext/codegen/react/components/rnwcore/Props.h @@ -355,6 +355,7 @@ class ModalHostViewProps final : public ViewProps { bool animated{false}; ModalHostViewSupportedOrientationsMask supportedOrientations{static_cast(ModalHostViewSupportedOrientations::Portrait)}; int identifier{0}; + std::string title{}; }; class SafeAreaViewProps final : public ViewProps { diff --git a/vnext/overrides.json b/vnext/overrides.json index d3210cae664..7ad85972cb7 100644 --- a/vnext/overrides.json +++ b/vnext/overrides.json @@ -493,6 +493,13 @@ "baseFile": "packages/react-native/Libraries/LogBox/UI/LogBoxInspectorStackFrame.js", "baseHash": "663d3325298404d7c012a6aa53e833eb5fc2ec76" }, + { + "type": "patch", + "file": "src-win/Libraries/Modal/Modal.d.ts", + "baseFile": "packages/react-native/Libraries/Modal/Modal.d.ts", + "baseHash": "aeebd34b8cccade2637e310a63a1e9a41f149f64", + "issue": 0 + }, { "type": "derived", "file": "src-win/Libraries/Modal/Modal.windows.js", @@ -613,6 +620,13 @@ "baseFile": "packages/react-native/src/private/debugging/ReactDevToolsSettingsManager.android.js", "baseHash": "df41b76dc3d2df9455fae588748261d7b0a22d01" }, + { + "type": "patch", + "file": "src-win/src/private/specs/components/RCTModalHostViewNativeComponent.windows.js", + "baseFile": "packages/react-native/src/private/specs/components/RCTModalHostViewNativeComponent.js", + "baseHash": "a5e0c9fe3a0777f704e0685589019b4dd443d385", + "issue": 0 + }, { "type": "platform", "file": "src-win/src/private/specs/modules/NativeAppTheme.js" diff --git a/vnext/src-win/Libraries/Modal/Modal.d.ts b/vnext/src-win/Libraries/Modal/Modal.d.ts new file mode 100644 index 00000000000..e81dff4f432 --- /dev/null +++ b/vnext/src-win/Libraries/Modal/Modal.d.ts @@ -0,0 +1,123 @@ +/** + * 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. + * + * @format + */ + +import type * as React from 'react'; +import {ViewProps} from '../Components/View/ViewPropTypes'; +import {NativeSyntheticEvent} from '../Types/CoreEventTypes'; +import {ColorValue} from '../StyleSheet/StyleSheet'; + +export interface ModalBaseProps { + /** + * @deprecated Use animationType instead + */ + animated?: boolean | undefined; + /** + * The `animationType` prop controls how the modal animates. + * + * - `slide` slides in from the bottom + * - `fade` fades into view + * - `none` appears without an animation + */ + animationType?: 'none' | 'slide' | 'fade' | undefined; + /** + * The `transparent` prop determines whether your modal will fill the entire view. + * Setting this to `true` will render the modal over a transparent background. + */ + transparent?: boolean | undefined; + /** + * The `visible` prop determines whether your modal is visible. + */ + visible?: boolean | undefined; + /** + * The `onRequestClose` callback is called when the user taps the hardware back button on Android or the menu button on Apple TV. + * + * This is required on Apple TV and Android. + */ + onRequestClose?: ((event: NativeSyntheticEvent) => void) | undefined; + /** + * The `onShow` prop allows passing a function that will be called once the modal has been shown. + */ + onShow?: ((event: NativeSyntheticEvent) => void) | undefined; + + /** + * The `backdropColor` props sets the background color of the modal's container. + * Defaults to `white` if not provided and transparent is `false`. Ignored if `transparent` is `true`. + */ + backdropColor?: ColorValue | undefined; +} + +export interface ModalPropsIOS { + /** + * The `presentationStyle` determines the style of modal to show + */ + presentationStyle?: + | 'fullScreen' + | 'pageSheet' + | 'formSheet' + | 'overFullScreen' + | undefined; + + /** + * The `supportedOrientations` prop allows the modal to be rotated to any of the specified orientations. + * On iOS, the modal is still restricted by what's specified in your app's Info.plist's UISupportedInterfaceOrientations field. + */ + supportedOrientations?: + | Array< + | 'portrait' + | 'portrait-upside-down' + | 'landscape' + | 'landscape-left' + | 'landscape-right' + > + | undefined; + + /** + * The `onDismiss` prop allows passing a function that will be called once the modal has been dismissed. + */ + onDismiss?: (() => void) | undefined; + + /** + * The `onOrientationChange` callback is called when the orientation changes while the modal is being displayed. + * The orientation provided is only 'portrait' or 'landscape'. This callback is also called on initial render, regardless of the current orientation. + */ + onOrientationChange?: + | ((event: NativeSyntheticEvent) => void) + | undefined; +} + +export interface ModalPropsAndroid { + /** + * Controls whether to force hardware acceleration for the underlying window. + */ + hardwareAccelerated?: boolean | undefined; + + /** + * Determines whether your modal should go under the system statusbar. + */ + statusBarTranslucent?: boolean | undefined; + + /** + * Determines whether your modal should go under the system navigationbar. + */ + navigationBarTranslucent?: boolean | undefined; +} +export interface ModalWindowsProps { + /* title for the modal, shown in the title bar */ + // [Windows + title?: string | undefined; + // Windows] +} + +export type ModalProps = ModalBaseProps & + ModalPropsIOS & + ModalPropsAndroid & + ModalWindowsProps & + ViewProps; + +export class Modal extends React.Component {} diff --git a/vnext/src-win/Libraries/Modal/Modal.windows.js b/vnext/src-win/Libraries/Modal/Modal.windows.js index aa774765b98..fb12803db8f 100644 --- a/vnext/src-win/Libraries/Modal/Modal.windows.js +++ b/vnext/src-win/Libraries/Modal/Modal.windows.js @@ -174,6 +174,12 @@ export type Props = $ReadOnly<{| * Defaults to `white` if not provided and transparent is `false`. Ignored if `transparent` is `true`. */ backdropColor?: ?string, + + /** + * [Windows] The `title` prop sets the title of the modal window. + * Only applicable when `transparent` is `false`. + */ + title?: ?string, |}>; function confirmProps(props: Props) { @@ -329,7 +335,9 @@ class Modal extends React.Component { onStartShouldSetResponder={this._shouldSetResponder} supportedOrientations={this.props.supportedOrientations} onOrientationChange={this.props.onOrientationChange} - testID={this.props.testID}> + testID={this.props.testID} + title={this.props.title} // Add title prop here + > ; + +type NativeProps = $ReadOnly<{| + ...ViewProps, + + /** + * The `animationType` prop controls how the modal animates. + * + * See https://reactnative.dev/docs/modal#animationtype + */ + animationType?: WithDefault<'none' | 'slide' | 'fade', 'none'>, + + /** + * The `presentationStyle` prop controls how the modal appears. + * + * See https://reactnative.dev/docs/modal#presentationstyle + */ + presentationStyle?: WithDefault< + 'fullScreen' | 'pageSheet' | 'formSheet' | 'overFullScreen', + 'fullScreen', + >, + + /** + * The `transparent` prop determines whether your modal will fill the + * entire view. + * + * See https://reactnative.dev/docs/modal#transparent + */ + transparent?: WithDefault, + + /** + * The `statusBarTranslucent` prop determines whether your modal should go under + * the system statusbar. + * + * See https://reactnative.dev/docs/modal#statusBarTranslucent + */ + statusBarTranslucent?: WithDefault, + + /** + * The `navigationBarTranslucent` prop determines whether your modal should go under + * the system navigationbar. + * + * See https://reactnative.dev/docs/modal#navigationBarTranslucent + */ + navigationBarTranslucent?: WithDefault, + + /** + * The `hardwareAccelerated` prop controls whether to force hardware + * acceleration for the underlying window. + * + * See https://reactnative.dev/docs/modal#hardwareaccelerated + */ + hardwareAccelerated?: WithDefault, + + /** + * The `onRequestClose` callback is called when the user taps the hardware + * back button on Android or the menu button on Apple TV. + * + * This is required on Apple TV and Android. + * + * See https://reactnative.dev/docs/modal#onrequestclose + */ + onRequestClose?: ?DirectEventHandler, + + /** + * The `onShow` prop allows passing a function that will be called once the + * modal has been shown. + * + * See https://reactnative.dev/docs/modal#onshow + */ + onShow?: ?DirectEventHandler, + + /** + * The `onDismiss` prop allows passing a function that will be called once + * the modal has been dismissed. + * + * See https://reactnative.dev/docs/modal#ondismiss + */ + onDismiss?: ?DirectEventHandler, + + /** + * The `visible` prop determines whether your modal is visible. + * + * See https://reactnative.dev/docs/modal#visible + */ + visible?: WithDefault, + + /** + * Deprecated. Use the `animationType` prop instead. + */ + animated?: WithDefault, + + /** + * The `supportedOrientations` prop allows the modal to be rotated to any of the specified orientations. + * + * See https://reactnative.dev/docs/modal#supportedorientations + */ + supportedOrientations?: WithDefault< + $ReadOnlyArray< + | 'portrait' + | 'portrait-upside-down' + | 'landscape' + | 'landscape-left' + | 'landscape-right', + >, + 'portrait', + >, + + /** + * The `onOrientationChange` callback is called when the orientation changes while the modal is being displayed. + * + * See https://reactnative.dev/docs/modal#onorientationchange + */ + onOrientationChange?: ?DirectEventHandler, + + /** + * The `identifier` is the unique number for identifying Modal components. + */ + identifier?: WithDefault, + + /* + title for the modal + windows only + */ + // [Windows + title?: WithDefault, + // Windows] +|}>; + +export default (codegenNativeComponent('ModalHostView', { + interfaceOnly: true, + paperComponentName: 'RCTModalHostView', +}): HostComponent); From 04f34a0400194fc87462f44fe734b15903ce7842 Mon Sep 17 00:00:00 2001 From: Abhijeet Jha Date: Fri, 2 May 2025 10:17:16 +0530 Subject: [PATCH 2/9] Change files --- ...ative-windows-5a8be4f7-4d46-49db-bc56-5b82f2ea97d0.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/react-native-windows-5a8be4f7-4d46-49db-bc56-5b82f2ea97d0.json diff --git a/change/react-native-windows-5a8be4f7-4d46-49db-bc56-5b82f2ea97d0.json b/change/react-native-windows-5a8be4f7-4d46-49db-bc56-5b82f2ea97d0.json new file mode 100644 index 00000000000..f6762eb5caf --- /dev/null +++ b/change/react-native-windows-5a8be4f7-4d46-49db-bc56-5b82f2ea97d0.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "addded titlebar , title handling , X handling , resizable", + "packageName": "react-native-windows", + "email": "abhijeetjha@microsoft.com", + "dependentChangeType": "patch" +} From 8774f903814e611884ed88557d24e3785e26dbb5 Mon Sep 17 00:00:00 2001 From: Abhijeet Jha Date: Fri, 2 May 2025 11:17:30 +0530 Subject: [PATCH 3/9] lint and format fix --- .../WindowsModalHostViewComponentView.cpp | 18 +++++++++--------- vnext/src-win/Libraries/Modal/Modal.d.ts | 8 ++++---- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.cpp index 8331db509d7..d62b227f7fb 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.cpp @@ -7,12 +7,12 @@ #include "../../../codegen/react/components/rnwcore/ModalHostView.g.h" #include +#include #include #include #include #include -#include -#include +#include #include namespace winrt::Microsoft::ReactNative::Composition::implementation { @@ -81,7 +81,7 @@ struct ModalHostView : public winrt::implementsvisible.value_or(true)) { @@ -311,23 +311,23 @@ struct ModalHostView : public winrt::implementsEventEmitter()) { - OutputDebugStringW(L"[ModalHostView] Dispatching onRequestClose event.\n"); + OutputDebugStringW(L"[ModalHostView] Dispatching onRequestClose event.\n"); ::Microsoft::ReactNativeSpecs::ModalHostViewEventEmitter::OnRequestClose eventArgs; eventEmitter->onRequestClose(eventArgs); } } }); } else { - OutputDebugStringW(L"[ModalHostView] Failed to get AppWindow from WindowId.\n"); + OutputDebugStringW(L"[ModalHostView] Failed to get AppWindow from WindowId.\n"); } // set the top-level windows as the new hwnd diff --git a/vnext/src-win/Libraries/Modal/Modal.d.ts b/vnext/src-win/Libraries/Modal/Modal.d.ts index e81dff4f432..db9ae6c1ce1 100644 --- a/vnext/src-win/Libraries/Modal/Modal.d.ts +++ b/vnext/src-win/Libraries/Modal/Modal.d.ts @@ -108,10 +108,10 @@ export interface ModalPropsAndroid { navigationBarTranslucent?: boolean | undefined; } export interface ModalWindowsProps { - /* title for the modal, shown in the title bar */ - // [Windows - title?: string | undefined; - // Windows] + /* title for the modal, shown in the title bar */ + // [Windows + title?: string | undefined; + // Windows] } export type ModalProps = ModalBaseProps & From f5578c55938c6bb541b23270daf5846b9ba418d6 Mon Sep 17 00:00:00 2001 From: Abhijeet Jha Date: Wed, 7 May 2025 15:04:23 +0530 Subject: [PATCH 4/9] removed debug logs and resizable property --- .../WindowsModalHostViewComponentView.cpp | 71 +++++++------------ .../src-win/Libraries/Modal/Modal.windows.js | 3 +- 2 files changed, 26 insertions(+), 48 deletions(-) diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.cpp index d62b227f7fb..d0fc2cfc33a 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.cpp @@ -97,10 +97,9 @@ struct ModalHostView : public winrt::implements(layoutMetrics.Frame.Width * layoutMetrics.PointScaleFactor); + int32_t clientHeightPx = static_cast(layoutMetrics.Frame.Height * layoutMetrics.PointScaleFactor); + + // Ensure minimum size for the window + clientWidthPx = std::max(100, clientWidthPx); + clientHeightPx = std::max(100, clientHeightPx); + + // Size the client area directly + m_appWindow.ResizeClient({clientWidthPx, clientHeightPx}); + + // Center the window on its parent RECT parentRC; GetWindowRect(m_parentHwnd, &parentRC); - int32_t xCor = static_cast( - (parentRC.left + parentRC.right - layoutMetrics.Frame.Width * layoutMetrics.PointScaleFactor) / 2); - int32_t yCor = static_cast( - (parentRC.top + parentRC.bottom - layoutMetrics.Frame.Height * layoutMetrics.PointScaleFactor) / 2); - - winrt::Windows::Graphics::RectInt32 rect2{ - (int)xCor, - (int)yCor, - static_cast(layoutMetrics.Frame.Width * (layoutMetrics.PointScaleFactor)), - static_cast(layoutMetrics.Frame.Height * (layoutMetrics.PointScaleFactor))}; - - // Log the dimensions for debugging - OutputDebugStringW(L"[ModalHostView] AdjustWindowSize Resizing to: "); - OutputDebugStringW((winrt::to_hstring(rect2.Width) + L"x" + winrt::to_hstring(rect2.Height) + L"\n").c_str()); - - m_popUp.MoveAndResize(rect2); + auto outerSize = m_appWindow.Size(); + + int32_t xCor = parentRC.left + (parentRC.right - parentRC.left - outerSize.Width) / 2; + int32_t yCor = parentRC.top + (parentRC.bottom - parentRC.top - outerSize.Height) / 2; + + m_appWindow.Move({xCor, yCor}); }; void ShowOnUIThread(const winrt::Microsoft::ReactNative::ComponentView &view) { @@ -277,37 +276,21 @@ struct ModalHostView : public winrt::implementstitle.value_or("RNW Modal")); - OutputDebugStringW(L"[ModalHostView] Setting initial title: "); - OutputDebugStringW(titleValue.c_str()); - OutputDebugStringW(L"\n"); - + if (m_localProps && m_localProps->title.has_value()) { + winrt::hstring titleValue = winrt::to_hstring(m_localProps->title.value()); m_appWindow.Title(titleValue); - - // Double check if the title was set - OutputDebugStringW(L"[ModalHostView] Current window title: "); - OutputDebugStringW(m_appWindow.Title().c_str()); - OutputDebugStringW(L"\n"); } else { - OutputDebugStringW(L"[ModalHostView] Setting default title (no props yet).\n"); - m_appWindow.Title(L"RNW Modal"); // Set a default title + m_appWindow.Title(L""); // Empty title if not provided } // Handle close request ('X' button) @@ -315,19 +298,15 @@ struct ModalHostView : public winrt::implementsEventEmitter()) { - OutputDebugStringW(L"[ModalHostView] Dispatching onRequestClose event.\n"); ::Microsoft::ReactNativeSpecs::ModalHostViewEventEmitter::OnRequestClose eventArgs; eventEmitter->onRequestClose(eventArgs); } } }); - } else { - OutputDebugStringW(L"[ModalHostView] Failed to get AppWindow from WindowId.\n"); } // set the top-level windows as the new hwnd diff --git a/vnext/src-win/Libraries/Modal/Modal.windows.js b/vnext/src-win/Libraries/Modal/Modal.windows.js index fb12803db8f..6bf7bca48a4 100644 --- a/vnext/src-win/Libraries/Modal/Modal.windows.js +++ b/vnext/src-win/Libraries/Modal/Modal.windows.js @@ -177,7 +177,6 @@ export type Props = $ReadOnly<{| /** * [Windows] The `title` prop sets the title of the modal window. - * Only applicable when `transparent` is `false`. */ title?: ?string, |}>; @@ -336,7 +335,7 @@ class Modal extends React.Component { supportedOrientations={this.props.supportedOrientations} onOrientationChange={this.props.onOrientationChange} testID={this.props.testID} - title={this.props.title} // Add title prop here + title={this.props.title} > From c29086fac2c8995e5560e949eccd63fbbaac094e Mon Sep 17 00:00:00 2001 From: Abhijeet Jha Date: Wed, 7 May 2025 15:19:13 +0530 Subject: [PATCH 5/9] removed unused imports from modalHostView .cpp file --- .../Composition/Modal/WindowsModalHostViewComponentView.cpp | 3 --- 1 file changed, 3 deletions(-) diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.cpp index d0fc2cfc33a..665a4d3efb6 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.cpp @@ -7,13 +7,10 @@ #include "../../../codegen/react/components/rnwcore/ModalHostView.g.h" #include -#include #include #include #include #include -#include -#include namespace winrt::Microsoft::ReactNative::Composition::implementation { From e6f1b9a9e1c1baf84fa729a33e41cfd8a99292d7 Mon Sep 17 00:00:00 2001 From: Abhijeet Jha Date: Thu, 8 May 2025 09:57:05 +0530 Subject: [PATCH 6/9] lint and format fix --- .../Modal/WindowsModalHostViewComponentView.cpp | 12 ++++++------ vnext/src-win/Libraries/Modal/Modal.windows.js | 3 +-- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.cpp index 665a4d3efb6..99632acbcc9 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.cpp @@ -95,8 +95,8 @@ struct ModalHostView : public winrt::implements(layoutMetrics.Frame.Width * layoutMetrics.PointScaleFactor); int32_t clientHeightPx = static_cast(layoutMetrics.Frame.Height * layoutMetrics.PointScaleFactor); - + // Ensure minimum size for the window clientWidthPx = std::max(100, clientWidthPx); clientHeightPx = std::max(100, clientHeightPx); // Size the client area directly m_appWindow.ResizeClient({clientWidthPx, clientHeightPx}); - + // Center the window on its parent RECT parentRC; GetWindowRect(m_parentHwnd, &parentRC); auto outerSize = m_appWindow.Size(); - + int32_t xCor = parentRC.left + (parentRC.right - parentRC.left - outerSize.Width) / 2; int32_t yCor = parentRC.top + (parentRC.bottom - parentRC.top - outerSize.Height) / 2; - + m_appWindow.Move({xCor, yCor}); }; diff --git a/vnext/src-win/Libraries/Modal/Modal.windows.js b/vnext/src-win/Libraries/Modal/Modal.windows.js index 6bf7bca48a4..cdf46c20390 100644 --- a/vnext/src-win/Libraries/Modal/Modal.windows.js +++ b/vnext/src-win/Libraries/Modal/Modal.windows.js @@ -335,8 +335,7 @@ class Modal extends React.Component { supportedOrientations={this.props.supportedOrientations} onOrientationChange={this.props.onOrientationChange} testID={this.props.testID} - title={this.props.title} - > + title={this.props.title}> Date: Thu, 8 May 2025 14:39:30 +0530 Subject: [PATCH 7/9] Update Modal.windows.js syntax after resolve conflict --- vnext/src-win/Libraries/Modal/Modal.windows.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vnext/src-win/Libraries/Modal/Modal.windows.js b/vnext/src-win/Libraries/Modal/Modal.windows.js index 5c7280c7052..0e972774884 100644 --- a/vnext/src-win/Libraries/Modal/Modal.windows.js +++ b/vnext/src-win/Libraries/Modal/Modal.windows.js @@ -179,7 +179,7 @@ export type Props = $ReadOnly<{ * [Windows] The `title` prop sets the title of the modal window. */ title?: ?string, -|}>; +}>; function confirmProps(props: Props) { if (__DEV__) { From 09208419ef7909722c816b3d44af7d751bc9e2f6 Mon Sep 17 00:00:00 2001 From: Abhijeet Jha <74712637+iamAbhi-916@users.noreply.github.com> Date: Thu, 8 May 2025 18:34:11 +0530 Subject: [PATCH 8/9] updated overrides --- vnext/overrides.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vnext/overrides.json b/vnext/overrides.json index 69d2c31c798..d199f58a25f 100644 --- a/vnext/overrides.json +++ b/vnext/overrides.json @@ -616,7 +616,7 @@ "type": "patch", "file": "src-win/src/private/specs/components/RCTModalHostViewNativeComponent.windows.js", "baseFile": "packages/react-native/src/private/specs/components/RCTModalHostViewNativeComponent.js", - "baseHash": "a5e0c9fe3a0777f704e0685589019b4dd443d385", + "baseHash": "dbda84f2de3e0aa3504e38bd4bbb687b1ea671b2", "issue": 0 }, { From b57b9b3a56682154e0570d93299e00f36efc61d0 Mon Sep 17 00:00:00 2001 From: Abhijeet Jha <74712637+iamAbhi-916@users.noreply.github.com> Date: Mon, 12 May 2025 13:39:07 +0530 Subject: [PATCH 9/9] updated rctmodalhostview file override structure --- vnext/overrides.json | 2 +- ...eComponent.windows.js => RCTModalHostViewNativeComponent.js} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename vnext/src-win/src/private/specs/components/{RCTModalHostViewNativeComponent.windows.js => RCTModalHostViewNativeComponent.js} (100%) diff --git a/vnext/overrides.json b/vnext/overrides.json index d199f58a25f..fc26978b4e9 100644 --- a/vnext/overrides.json +++ b/vnext/overrides.json @@ -614,7 +614,7 @@ }, { "type": "patch", - "file": "src-win/src/private/specs/components/RCTModalHostViewNativeComponent.windows.js", + "file": "src-win/src/private/specs/components/RCTModalHostViewNativeComponent.js", "baseFile": "packages/react-native/src/private/specs/components/RCTModalHostViewNativeComponent.js", "baseHash": "dbda84f2de3e0aa3504e38bd4bbb687b1ea671b2", "issue": 0 diff --git a/vnext/src-win/src/private/specs/components/RCTModalHostViewNativeComponent.windows.js b/vnext/src-win/src/private/specs/components/RCTModalHostViewNativeComponent.js similarity index 100% rename from vnext/src-win/src/private/specs/components/RCTModalHostViewNativeComponent.windows.js rename to vnext/src-win/src/private/specs/components/RCTModalHostViewNativeComponent.js