rename overlayColor to backdropColor in Modal (#46523)

Summary:
Pull Request resolved: #46523

the name change [commit](64ee571) was not properly imported from last diff for #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

@@ -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>