diff --git a/change/react-native-windows-e865cdf3-241b-45bd-ad8b-fa2df55df4cf.json b/change/react-native-windows-e865cdf3-241b-45bd-ad8b-fa2df55df4cf.json
new file mode 100644
index 00000000000..ebc28ca3c99
--- /dev/null
+++ b/change/react-native-windows-e865cdf3-241b-45bd-ad8b-fa2df55df4cf.json
@@ -0,0 +1,7 @@
+{
+ "type": "prerelease",
+ "comment": "Fix crash in Islands when opening Flyout without a target #6714",
+ "packageName": "react-native-windows",
+ "email": "lyahdav@users.noreply.github.com",
+ "dependentChangeType": "patch"
+}
diff --git a/packages/@react-native-windows/tester/src/js/examples-win/Flyout/FlyoutExample.windows.tsx b/packages/@react-native-windows/tester/src/js/examples-win/Flyout/FlyoutExample.windows.tsx
index 1e866d635c0..fcc578758c3 100644
--- a/packages/@react-native-windows/tester/src/js/examples-win/Flyout/FlyoutExample.windows.tsx
+++ b/packages/@react-native-windows/tester/src/js/examples-win/Flyout/FlyoutExample.windows.tsx
@@ -10,9 +10,11 @@ import {Flyout, Picker, Popup, Placement} from 'react-native-windows';
interface IFlyoutExampleState {
isFlyoutVisible: boolean;
+ isFlyoutNoTargetVisible: boolean;
isFlyoutTwoVisible: boolean;
isPopupVisible: boolean;
buttonTitle: string;
+ buttonNoTargetTitle: string;
isLightDismissEnabled: boolean;
isOverlayEnabled: boolean;
popupSwitchState: boolean;
@@ -41,9 +43,11 @@ class FlyoutExample extends React.Component<{}, IFlyoutExampleState> {
public state: IFlyoutExampleState = {
isFlyoutVisible: false,
+ isFlyoutNoTargetVisible: false,
isFlyoutTwoVisible: false,
isPopupVisible: false,
buttonTitle: 'Open Flyout',
+ buttonNoTargetTitle: 'Open Flyout without Target',
isLightDismissEnabled: true,
isOverlayEnabled: false,
popupSwitchState: true,
@@ -76,6 +80,12 @@ class FlyoutExample extends React.Component<{}, IFlyoutExampleState> {
+
+
+
Text Input to Anchor flyout to:{' '}
@@ -193,6 +203,17 @@ class FlyoutExample extends React.Component<{}, IFlyoutExampleState> {
)}
+ {this.state.isFlyoutNoTargetVisible && (
+
+
+ {lorumIpsum}
+
+
+ )}
{this.state.isPopupVisible && (
{
this.setState({buttonTitle: 'Close Flyout', isFlyoutVisible: true});
};
+ _onPressButtonNoTarget = () => {
+ this.setState({
+ buttonNoTargetTitle: 'Close Flyout without Target',
+ isFlyoutNoTargetVisible: true,
+ });
+ };
+
_onFlyoutButtonPressed = () => {
this.setState({buttonTitle: 'Open Flyout', isFlyoutVisible: false});
};
@@ -247,6 +275,13 @@ class FlyoutExample extends React.Component<{}, IFlyoutExampleState> {
_onFlyoutTwoDismissed = (_isOpen: boolean) => {
this.setState({isFlyoutTwoVisible: false});
};
+
+ _onFlyoutNoTargetDismissed = (_isOpen: boolean) => {
+ this.setState({
+ buttonNoTargetTitle: 'Open Flyout without Target',
+ isFlyoutNoTargetVisible: false,
+ });
+ };
}
export const displayName = (_undefined?: string) => {};
diff --git a/vnext/Microsoft.ReactNative/Views/FlyoutViewManager.cpp b/vnext/Microsoft.ReactNative/Views/FlyoutViewManager.cpp
index 949e3834f2c..34410a05733 100644
--- a/vnext/Microsoft.ReactNative/Views/FlyoutViewManager.cpp
+++ b/vnext/Microsoft.ReactNative/Views/FlyoutViewManager.cpp
@@ -384,7 +384,16 @@ void FlyoutShadowNode::SetTargetFrameworkElement() {
}
}
} else {
- m_targetElement = xaml::Window::Current().Content().as();
+ if (IsXamlIsland()) {
+ // // XamlRoot added in 19H1
+ if (Is19H1OrHigher()) {
+ if (auto xamlRoot = React::XamlUIService::GetXamlRoot(GetViewManager()->GetReactContext().Properties())) {
+ m_targetElement = xamlRoot.Content().as();
+ }
+ }
+ } else {
+ m_targetElement = xaml::Window::Current().Content().as();
+ }
}
}