diff --git a/packages/react-native/Libraries/Modal/Modal.d.ts b/packages/react-native/Libraries/Modal/Modal.d.ts index 6305af3d521529..9548d81de09624 100644 --- a/packages/react-native/Libraries/Modal/Modal.d.ts +++ b/packages/react-native/Libraries/Modal/Modal.d.ts @@ -46,10 +46,10 @@ export interface ModalBaseProps { onShow?: ((event: NativeSyntheticEvent) => void) | undefined; /** - * The `overlayColor` props sets the color of the modal's background overlay. + * The `backdropColor` props sets the background color of the modal's container. * Defaults to `white` if not provided and transparent is `false`. Ignored if `transparent` is `true`. */ - overlayColor?: ColorValue | undefined; + backdropColor?: ColorValue | undefined; } export interface ModalPropsIOS { diff --git a/packages/react-native/Libraries/Modal/Modal.js b/packages/react-native/Libraries/Modal/Modal.js index 9771ae95c2be16..303e3ea3b9a1e9 100644 --- a/packages/react-native/Libraries/Modal/Modal.js +++ b/packages/react-native/Libraries/Modal/Modal.js @@ -159,10 +159,10 @@ export type Props = $ReadOnly<{| onOrientationChange?: ?DirectEventHandler, /** - * The `overlayColor` props sets the color of the modal's background overlay. + * The `backdropColor` props sets the background color of the modal's container. * Defaults to `white` if not provided and transparent is `false`. Ignored if `transparent` is `true`. */ - overlayColor?: ?string, + backdropColor?: ?string, |}>; function confirmProps(props: Props) { @@ -257,7 +257,7 @@ class Modal extends React.Component { backgroundColor: this.props.transparent === true ? 'transparent' - : this.props.overlayColor ?? 'white', + : this.props.backdropColor ?? 'white', }; let animationType = this.props.animationType || 'none'; diff --git a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap index 21a9e670c8a1fb..a1e9005db2aac8 100644 --- a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap +++ b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap @@ -6377,7 +6377,7 @@ export type Props = $ReadOnly<{| | \\"landscape-right\\", >, onOrientationChange?: ?DirectEventHandler, - overlayColor?: ?string, + backdropColor?: ?string, |}>; type State = { isRendered: boolean, diff --git a/packages/rn-tester/js/examples/Modal/ModalPresentation.js b/packages/rn-tester/js/examples/Modal/ModalPresentation.js index a371d67b8e70a1..d800fd703170c5 100644 --- a/packages/rn-tester/js/examples/Modal/ModalPresentation.js +++ b/packages/rn-tester/js/examples/Modal/ModalPresentation.js @@ -34,7 +34,7 @@ const supportedOrientations = [ 'landscape-right', ]; -const overlayColors = ['red', 'blue', undefined]; +const backdropColors = ['red', 'blue', undefined]; function ModalPresentation() { const onDismiss = React.useCallback(() => { @@ -65,12 +65,12 @@ function ModalPresentation() { onDismiss: undefined, onShow: undefined, visible: false, - overlayColor: undefined, + backdropColor: undefined, }); const presentationStyle = props.presentationStyle; const hardwareAccelerated = props.hardwareAccelerated; const statusBarTranslucent = props.statusBarTranslucent; - const overlayColor = props.overlayColor; + const backdropColor = props.backdropColor; const [currentOrientation, setCurrentOrientation] = React.useState('unknown'); @@ -216,9 +216,9 @@ function ModalPresentation() { - Overlay Color ⚫️ + Backdrop Color ⚫️ - {overlayColors.map(type => ( + {backdropColors.map(type => ( setProps(prev => ({ ...prev, - overlayColor: type, + backdropColor: type, })) } - selected={type === overlayColor} + selected={type === backdropColor} /> ))}