diff --git a/change/react-native-windows-435e1359-4961-4938-9b95-12d1e464146f.json b/change/react-native-windows-435e1359-4961-4938-9b95-12d1e464146f.json new file mode 100644 index 00000000000..7e6ac3ca280 --- /dev/null +++ b/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": "fcalise@gmail.com", + "dependentChangeType": "patch" +} diff --git a/vnext/src-win/Libraries/Components/Flyout/Flyout.js b/vnext/src-win/Libraries/Components/Flyout/Flyout.js index 8124d83c889..a269dd614f6 100644 --- a/vnext/src-win/Libraries/Components/Flyout/Flyout.js +++ b/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 { 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 { diff --git a/vnext/src-win/Libraries/Components/Popup/Popup.js b/vnext/src-win/Libraries/Components/Popup/Popup.js index 08316cc14d6..a076e1d51da 100644 --- a/vnext/src-win/Libraries/Components/Popup/Popup.js +++ b/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 { 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 {