rename overlayColor to backdropColor in Modal

packages/react-native/Libraries/Modal/Modal.d.ts

@@ -46,10 +46,10 @@ export interface ModalBaseProps {
   onShow?: ((event: NativeSyntheticEvent<any>) => 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 {

packages/react-native/Libraries/Modal/Modal.js

@@ -159,10 +159,10 @@ export type Props = $ReadOnly<{|
   onOrientationChange?: ?DirectEventHandler<OrientationChangeEvent>,
 
   /**
-   * 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<Props, State> {
       backgroundColor:
         this.props.transparent === true
           ? 'transparent'
-          : this.props.overlayColor ?? 'white',
+          : this.props.backdropColor ?? 'white',
     };
 
     let animationType = this.props.animationType || 'none';

packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap

@@ -6377,7 +6377,7 @@ export type Props = $ReadOnly<{|
     | \\"landscape-right\\",
   >,
   onOrientationChange?: ?DirectEventHandler<OrientationChangeEvent>,
-  overlayColor?: ?string,
+  backdropColor?: ?string,
 |}>;
 type State = {
   isRendered: boolean,

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() {
         </View>
       </View>
       <View style={styles.block}>
-        <Text style={styles.title}>Overlay Color ⚫️</Text>
+        <Text style={styles.title}>Backdrop Color ⚫️</Text>
         <View style={styles.row}>
-          {overlayColors.map(type => (
+          {backdropColors.map(type => (
             <RNTOption
               key={type}
               style={styles.option}
@@ -227,10 +227,10 @@ function ModalPresentation() {
               onPress={() =>
                 setProps(prev => ({
                   ...prev,
-                  overlayColor: type,
+                  backdropColor: type,
                 }))
               }
-              selected={type === overlayColor}
+              selected={type === backdropColor}
             />
           ))}
         </View>