From f3078d6df6161a603ceb784c806736a3f6ab107d Mon Sep 17 00:00:00 2001
From: Liron Yahdav <lyahdav@users.noreply.github.com>
Date: Wed, 21 Jul 2021 11:10:50 -0700
Subject: [PATCH 1/3] Fix crash in Islands when opening Flyout without a target
 #6714

---
 .../Flyout/FlyoutExample.windows.tsx          | 35 +++++++++++++++++++
 .../Views/FlyoutViewManager.cpp               | 11 +++++-
 2 files changed, 45 insertions(+), 1 deletion(-)

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> {
         <View style={{justifyContent: 'center', padding: 20, width: 200}}>
           <Button onPress={this._onPress} title={this.state.buttonTitle} />
         </View>
+        <View style={{justifyContent: 'center', padding: 20, width: 200}}>
+          <Button
+            onPress={this._onPressButtonNoTarget}
+            title={this.state.buttonNoTargetTitle}
+          />
+        </View>
         <View style={{flexDirection: 'row', paddingTop: 200}}>
           <Text style={{padding: 10, width: 300, height: 32}}>
             Text Input to Anchor flyout to:{' '}
@@ -193,6 +203,17 @@ class FlyoutExample extends React.Component<{}, IFlyoutExampleState> {
             </View>
           </Flyout>
         )}
+        {this.state.isFlyoutNoTargetVisible && (
+          <Flyout
+            isOpen={this.state.isFlyoutNoTargetVisible}
+            isLightDismissEnabled={true}
+            onDismiss={this._onFlyoutNoTargetDismissed}>
+            <View
+              style={{backgroundColor: 'lightblue', width: 200, height: 300}}>
+              <Text>{lorumIpsum}</Text>
+            </View>
+          </Flyout>
+        )}
         {this.state.isPopupVisible && (
           <Popup
             isOpen={this.state.isPopupVisible}
@@ -225,6 +246,13 @@ class FlyoutExample extends React.Component<{}, IFlyoutExampleState> {
     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..a0e09c8a2bf 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<xaml::FrameworkElement>();
+    if (IsXamlIsland()) {
+      // // XamlRoot added in 19H1
+      if (Is19H1OrHigher()) {
+        if (auto xamlRoot = React::XamlUIService::GetXamlRoot(GetViewManager()->GetReactContext().Properties())) {
+          m_targetElement = xamlRoot.Content().try_as<xaml::FrameworkElement>();
+        }
+      }
+    } else {
+      m_targetElement = xaml::Window::Current().Content().as<xaml::FrameworkElement>();
+    }
   }
 }
 

From d1abf4c91ad1f9f2138cf4ae59417ad08dad134f Mon Sep 17 00:00:00 2001
From: Liron Yahdav <lyahdav@users.noreply.github.com>
Date: Wed, 21 Jul 2021 11:13:30 -0700
Subject: [PATCH 2/3] Change files

---
 ...ative-windows-e865cdf3-241b-45bd-ad8b-fa2df55df4cf.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/react-native-windows-e865cdf3-241b-45bd-ad8b-fa2df55df4cf.json

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"
+}

From ac8efef7b627585a94973904abdb4f69f798096b Mon Sep 17 00:00:00 2001
From: Liron Yahdav <lyahdav@users.noreply.github.com>
Date: Fri, 24 Sep 2021 17:43:49 -0700
Subject: [PATCH 3/3] change try_as to as

Co-authored-by: Chris Glein <26607885+chrisglein@users.noreply.github.com>
---
 vnext/Microsoft.ReactNative/Views/FlyoutViewManager.cpp | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/vnext/Microsoft.ReactNative/Views/FlyoutViewManager.cpp b/vnext/Microsoft.ReactNative/Views/FlyoutViewManager.cpp
index a0e09c8a2bf..34410a05733 100644
--- a/vnext/Microsoft.ReactNative/Views/FlyoutViewManager.cpp
+++ b/vnext/Microsoft.ReactNative/Views/FlyoutViewManager.cpp
@@ -388,7 +388,7 @@ void FlyoutShadowNode::SetTargetFrameworkElement() {
       // // XamlRoot added in 19H1
       if (Is19H1OrHigher()) {
         if (auto xamlRoot = React::XamlUIService::GetXamlRoot(GetViewManager()->GetReactContext().Properties())) {
-          m_targetElement = xamlRoot.Content().try_as<xaml::FrameworkElement>();
+          m_targetElement = xamlRoot.Content().as<xaml::FrameworkElement>();
         }
       }
     } else {