Custom Background Colour for Modal Display

Currently the background of Modal component is set to either transparent or white. User should have control over the background. I’m Referring to issue #12478

Environment

OS: macOS High Sierra 10.13.3 Node: 9.7.1 Yarn: Not Found npm: 5.6.0 Watchman: Not Found Xcode: Not Found Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)

react: ^16.2.0 => 16.2.0 react-native: ^0.53.0 => 0.53.0

Expected Behavior

Expected default behaviour of Modals on mobile devices, is that on display of the modal, the background page dims. Currently, the transparent property of the Modal component sets the background to either transparent or white. It would make more sense to give the user the ability to set custom background colour (e.g: rgba(0, 0, 0, 0.4) for dim background)

Actual Behavior

Currently the background for Modal component is either transparent or white

Solution

I was able to change the code (in Libraries/Modal/Modal.js) that when transparent is false, it dims the background.

backgroundColor: this.props.transparent ? 'transparent' : 'rgba(0, 0, 0, 0.4)'

However, it would be more correct to allow the user to select from a wider range of options by creating a new optional property called overlayColor to set the background colour for Modal component as follows:

backgroundColor: this.props.transparent ? 'transparent' : (this.props.overlayColor ? this.props.overlayColor : 'white')

[stepdi]

@tcanbolat But it has weird slide animation of the background. Dimmed background slides with the modal contents.

[deflorilemarului]

issue still there. check Modal.js

const containerStyles = { backgroundColor: this.props.transparent ? ‘transparent’ : ‘white’, };

it says: ‘white’ RN version 0.58.3