Skip to content

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

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.

Sign up for GitHub

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
chiaramooney merged 6 commits into from
Jul 3, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a83964b
fix(Flyout): deprecation warning in new arch
frankcalise Jun 25, 2025
92c84cb
fix(Popup): deprecation warning in new arch
frankcalise Jun 25, 2025
2de5730
fix(Flyout): use warnOnce
frankcalise Jun 25, 2025
5d42b00
fix(Popup): use warnOnce
frankcalise Jun 25, 2025
4c3041e
Change files
frankcalise Jun 26, 2025
74b1e21
Merge branch 'main' into fix/newarch-warn-flyout-popup
frankcalise Jun 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions change/react-native-windows-435e1359-4961-4938-9b95-12d1e464146f.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
}
11 changes: 11 additions & 0 deletions vnext/src-win/Libraries/Components/Flyout/Flyout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -66,6 +68,8 @@ type State = $ReadOnly<{
targetRef?: React.ReactNode,
}>;

const isFabric = global.nativeFabricUIManager;

/**
* Renders a flyout component.
*
Expand Down Expand Up @@ -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 {
Expand Down
11 changes: 11 additions & 0 deletions vnext/src-win/Libraries/Components/Popup/Popup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -49,6 +51,8 @@ type State = $ReadOnly<{|
targetRef?: React.ReactNode,
|}>;

const isFabric = global.nativeFabricUIManager;

/**
* Renders a popup component.
*
Expand All @@ -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 {
Expand Down
Loading