Skip to content

Modal : Added Titlebar , title , X handling and movable for windows #14636

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 13 commits into from
May 12, 2025

Conversation

iamAbhi-916
Copy link
Contributor

@iamAbhi-916 iamAbhi-916 commented May 2, 2025

Description

Added Titlebar , title , X handling and movable for windows

Type of Change

  • New feature (non-breaking change which adds functionality)

Why

What is the motivation for this change? Add a few sentences describing the context and overall goals of the pull request's commits.

Resolves [Add Relevant Issue Here]
#14067

What

Added JS side hadndling for windows only prop Title .
Passed the prop from js side to native side and handled the behaviour if title has been passed and not
handled closing modal using X
modal is movable
the title can be updated dynamically.

Screenshots

title , X handling and movable and at last with not title in titlebar for windows

modal_final_demo.mp4

Testing

tested in playground

Changelog

yes

Add a brief summary of the change to use in the release notes for the next release.
Added support for a title prop on Windows Modals, allowing a title bar to be displayed.
The modal window can now be closed using the 'X' button, triggering the onRequestClose event.
The title can be updated dynamically.

Microsoft Reviewers: Open in CodeFlow

@iamAbhi-916 iamAbhi-916 self-assigned this May 2, 2025
@iamAbhi-916 iamAbhi-916 marked this pull request as ready for review May 3, 2025 11:29
@iamAbhi-916 iamAbhi-916 requested a review from a team as a code owner May 3, 2025 11:29
@iamAbhi-916 iamAbhi-916 marked this pull request as draft May 3, 2025 11:36
@anupriya13
Copy link
Contributor

The resize behaviour feels a bit off, perhaps it could use a bit of refinement. Content inside the modal is not resized correctly.

@iamAbhi-916
Copy link
Contributor Author

iamAbhi-916 commented May 6, 2025

The resize behaviour feels a bit off, perhaps it could use a bit of refinement. Content inside the modal is not resized correctly.

yeah, that feature should be implemented separately.
created issue for the same : 14646

@iamAbhi-916 iamAbhi-916 changed the title Modal : Added Titlebar , title , X handling , resizable and movable for windows Modal : Added Titlebar , title , X handling and movable for windows May 7, 2025
@iamAbhi-916 iamAbhi-916 marked this pull request as ready for review May 7, 2025 09:39
@anupriya13 anupriya13 requested a review from Copilot May 12, 2025 12:34
Copy link

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR introduces Windows-specific enhancements for Modal functionality by adding support for a title bar, dynamic title updates, and improved X (close) handling, along with enabling window movability.

  • Added a new "title" prop on the native and JS sides for Windows Modal.
  • Updated codegen and native components to pass and handle the title prop.
  • Modified AppWindow handling to include proper cleanup of closing tokens and ensure proper title updates.

Reviewed Changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
vnext/src-win/src/private/specs/components/RCTModalHostViewNativeComponent.js Added the Windows-only title prop in the native component spec.
vnext/src-win/Libraries/Modal/Modal.windows.js Extended Modal component to include the title prop and pass it downstream.
vnext/overrides.json Updated mapping for patched Modal type definitions and native component specs.
vnext/codegen/react/components/rnwcore/Props.h, Props.cpp, ModalHostView.g.h Introduced title property in the codegen files for ModalHostView.
vnext/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.cpp Updated AppWindow handling, including title updates, window centering, and closing token cleanup.
change/react-native-windows-5a8be4f7-4d46-49db-bc56-5b82f2ea97d0.json Updated the prerelease comment with new functionality details.

@iamAbhi-916 iamAbhi-916 requested a review from acoates-ms May 12, 2025 17:11
@iamAbhi-916 iamAbhi-916 merged commit ec1b2ef into microsoft:main May 12, 2025
59 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants