From 7aeff18970a2b47cbb3fffc1408e4bb21eec6fed Mon Sep 17 00:00:00 2001
From: Alan Lee <alanlee2@meta.com>
Date: Mon, 16 Sep 2024 16:11:55 -0700
Subject: [PATCH] rename overlayColor to backdropColor in Modal (#46523)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46523

the name change [commit](https://github.com/facebook/react-native/pull/46322/commits/64ee5712f7aa9a3df84589146d00f81bac6d945c) was not properly imported from last diff for https://github.com/facebook/react-native/pull/46322/

redoing the name change: overlayColor -> backdropColor

Changelog:
[general][Fixed] - rename overlayColor prop in Modal to backdropColor

Reviewed By: christophpurrer

Differential Revision: D62760028

fbshipit-source-id: 92d6e8f002c92f4e13136542dce946434516988e
---
 packages/react-native/Libraries/Modal/Modal.d.ts   |  4 ++--
 packages/react-native/Libraries/Modal/Modal.js     |  6 +++---
 .../__snapshots__/public-api-test.js.snap          |  2 +-
 .../js/examples/Modal/ModalPresentation.js         | 14 +++++++-------
 4 files changed, 13 insertions(+), 13 deletions(-)

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<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 {
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<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';
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<OrientationChangeEvent>,
-  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() {
         </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>