From d05a6c4a9425b8551898ebefbbc7fef1f249c6af Mon Sep 17 00:00:00 2001 From: shubhamguptadream11 Date: Wed, 4 Sep 2024 15:13:02 +0530 Subject: [PATCH 1/4] feat: added support for background color in modal --- .../react-native/Libraries/Modal/Modal.d.ts | 7 +++++ .../react-native/Libraries/Modal/Modal.js | 10 ++++++- .../js/examples/Modal/ModalPresentation.js | 28 +++++++++++++++++++ 3 files changed, 44 insertions(+), 1 deletion(-) diff --git a/packages/react-native/Libraries/Modal/Modal.d.ts b/packages/react-native/Libraries/Modal/Modal.d.ts index 4cc2df22367b..6305af3d5215 100644 --- a/packages/react-native/Libraries/Modal/Modal.d.ts +++ b/packages/react-native/Libraries/Modal/Modal.d.ts @@ -10,6 +10,7 @@ import type * as React from 'react'; import {ViewProps} from '../Components/View/ViewPropTypes'; import {NativeSyntheticEvent} from '../Types/CoreEventTypes'; +import {ColorValue} from '../StyleSheet/StyleSheet'; export interface ModalBaseProps { /** @@ -43,6 +44,12 @@ export interface ModalBaseProps { * The `onShow` prop allows passing a function that will be called once the modal has been shown. */ onShow?: ((event: NativeSyntheticEvent) => void) | undefined; + + /** + * The `overlayColor` props sets the color of the modal's background overlay. + * Defaults to `white` if not provided and transparent is `false`. Ignored if `transparent` is `true`. + */ + overlayColor?: ColorValue | undefined; } export interface ModalPropsIOS { diff --git a/packages/react-native/Libraries/Modal/Modal.js b/packages/react-native/Libraries/Modal/Modal.js index 1942d9e567d3..e1d54cd16fef 100644 --- a/packages/react-native/Libraries/Modal/Modal.js +++ b/packages/react-native/Libraries/Modal/Modal.js @@ -157,6 +157,12 @@ export type Props = $ReadOnly<{| * See https://reactnative.dev/docs/modal#onorientationchange */ onOrientationChange?: ?DirectEventHandler, + + /** + * The `overlayColor` props sets the color of the modal's background overlay. + * Defaults to `white` if not provided and transparent is `false`. Ignored if `transparent` is `true`. + */ + overlayColor?: ?string, |}>; function confirmProps(props: Props) { @@ -250,7 +256,9 @@ class Modal extends React.Component { const containerStyles = { backgroundColor: - this.props.transparent === true ? 'transparent' : 'white', + this.props.transparent === true + ? 'transparent' + : this.props.overlayColor ?? 'white', }; let animationType = this.props.animationType || 'none'; diff --git a/packages/rn-tester/js/examples/Modal/ModalPresentation.js b/packages/rn-tester/js/examples/Modal/ModalPresentation.js index e5f2cad774eb..52e3d8507465 100644 --- a/packages/rn-tester/js/examples/Modal/ModalPresentation.js +++ b/packages/rn-tester/js/examples/Modal/ModalPresentation.js @@ -34,6 +34,12 @@ const supportedOrientations = [ 'landscape-right', ]; +const overlayColors = [ + 'red', + 'blue', + undefined, // default prop value +]; + function ModalPresentation() { const onDismiss = React.useCallback(() => { alert('onDismiss'); @@ -63,10 +69,12 @@ function ModalPresentation() { onDismiss: undefined, onShow: undefined, visible: false, + overlayColor: undefined, }); const presentationStyle = props.presentationStyle; const hardwareAccelerated = props.hardwareAccelerated; const statusBarTranslucent = props.statusBarTranslucent; + const overlayColor = props.overlayColor; const [currentOrientation, setCurrentOrientation] = React.useState('unknown'); @@ -211,6 +219,26 @@ function ModalPresentation() { /> + + Overlay Color ⚫️ + + {overlayColors.map(type => ( + + setProps(prev => ({ + ...prev, + overlayColor: type, + })) + } + selected={type === overlayColor} + /> + ))} + + ); From 71a618d550ce764ffedcfd90a8ef2d028538af9f Mon Sep 17 00:00:00 2001 From: shubhamguptadream11 Date: Wed, 4 Sep 2024 15:45:36 +0530 Subject: [PATCH 2/4] fix: test cases --- packages/rn-tester/js/examples/Modal/ModalPresentation.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/rn-tester/js/examples/Modal/ModalPresentation.js b/packages/rn-tester/js/examples/Modal/ModalPresentation.js index 52e3d8507465..a371d67b8e70 100644 --- a/packages/rn-tester/js/examples/Modal/ModalPresentation.js +++ b/packages/rn-tester/js/examples/Modal/ModalPresentation.js @@ -34,11 +34,7 @@ const supportedOrientations = [ 'landscape-right', ]; -const overlayColors = [ - 'red', - 'blue', - undefined, // default prop value -]; +const overlayColors = ['red', 'blue', undefined]; function ModalPresentation() { const onDismiss = React.useCallback(() => { @@ -224,7 +220,7 @@ function ModalPresentation() { {overlayColors.map(type => ( Date: Wed, 4 Sep 2024 15:52:39 +0530 Subject: [PATCH 3/4] fix: snap updated --- .../Libraries/__tests__/__snapshots__/public-api-test.js.snap | 1 + 1 file changed, 1 insertion(+) 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 e5f4590fdc51..051bff02b26a 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 @@ -6408,6 +6408,7 @@ export type Props = $ReadOnly<{| | \\"landscape-right\\", >, onOrientationChange?: ?DirectEventHandler, + overlayColor?: ?string, |}>; type State = { isRendered: boolean, From 64ee5712f7aa9a3df84589146d00f81bac6d945c Mon Sep 17 00:00:00 2001 From: shubhamguptadream11 Date: Fri, 13 Sep 2024 00:23:54 +0530 Subject: [PATCH 4/4] fix: renamed overlay color to backdrop --- packages/react-native/Libraries/Modal/Modal.d.ts | 4 ++-- packages/react-native/Libraries/Modal/Modal.js | 6 +++--- .../__tests__/__snapshots__/public-api-test.js.snap | 2 +- .../rn-tester/js/examples/Modal/ModalPresentation.js | 12 ++++++------ 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/react-native/Libraries/Modal/Modal.d.ts b/packages/react-native/Libraries/Modal/Modal.d.ts index 6305af3d5215..a8b647874271 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 color of the modal's background overlay. * 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 e1d54cd16fef..32f082184029 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 color of the modal's background overlay. * Defaults to `white` if not provided and transparent is `false`. Ignored if `transparent` is `true`. */ - overlayColor?: ?string, + backdropColor?: ?string, |}>; function confirmProps(props: Props) { @@ -258,7 +258,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 051bff02b26a..11bc4065329a 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 @@ -6408,7 +6408,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 a371d67b8e70..c59b07812724 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'); @@ -218,7 +218,7 @@ function ModalPresentation() { Overlay Color ⚫️ - {overlayColors.map(type => ( + {backdropColors.map(type => ( setProps(prev => ({ ...prev, - overlayColor: type, + backdropColor: type, })) } - selected={type === overlayColor} + selected={type === backdropColor} /> ))}