fix(new-arch): metro warning for Flyout/Popup (#14817)

* fix(Flyout): deprecation warning in new arch

* fix(Popup): deprecation warning in new arch

* fix(Flyout): use warnOnce

* fix(Popup): use warnOnce

* Change files

Author: frankcalise

change/react-native-windows-435e1359-4961-4938-9b95-12d1e464146f.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix(new-arch): add deprecation warning for Flyout/Popup",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

vnext/src-win/Libraries/Components/Flyout/Flyout.js

@@ -10,6 +10,8 @@ import FlyoutNativeComponent from './FlyoutNativeComponent';
 import * as React from 'react';
 import {findNodeHandle, StyleSheet} from 'react-native';
 
+const warnOnce = require('../../Utilities/warnOnce').default;
+
 type Placement =
   | 'top'
   | 'bottom'
@@ -66,6 +68,8 @@ type State = $ReadOnly<{
   targetRef?: React.ReactNode,
 }>;
 
+const isFabric = global.nativeFabricUIManager;
+
 /**
  * Renders a flyout component.
  *
@@ -93,6 +97,13 @@ export class Flyout extends React.Component<Props, State> {
 
   constructor(props: Props) {
     super(props);
+
+    if (__DEV__ && isFabric) {
+      warnOnce(
+        'flyout-new-arch-deprecated',
+        '`Flyout` is deprecated and not supported in the New Architecture. Use the new `Modal` component instead.',
+      );
+    }
   }
 
   render(): React.Node {

vnext/src-win/Libraries/Components/Popup/Popup.js

@@ -11,6 +11,8 @@ import type {ViewProps} from '../View/ViewPropTypes';
 import {findNodeHandle} from '../../ReactNative/RendererProxy';
 import StyleSheet from '../../StyleSheet/StyleSheet';
 
+const warnOnce = require('../../Utilities/warnOnce').default;
+
 const styles = StyleSheet.create({
   rctPopup: {
     position: 'absolute',
@@ -49,6 +51,8 @@ type State = $ReadOnly<{|
   targetRef?: React.ReactNode,
 |}>;
 
+const isFabric = global.nativeFabricUIManager;
+
 /**
  * Renders a popup component.
  *
@@ -75,6 +79,13 @@ export class Popup extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = {target: undefined, targetRef: null};
+
+    if (__DEV__ && isFabric) {
+      warnOnce(
+        'popup-new-arch-deprecated',
+        '`Popup` is deprecated and not supported in the New Architecture. Use the new `Modal` component instead.',
+      );
+    }
   }
 
   render(): React.Node {