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')

[react-native-bot]

Thanks for posting this! It looks like your issue may refer to an older version of React Native. Can you reproduce the issue on the latest release, v0.54.0?

Thank you for your contributions.

_{How to Contribute • What to Expect from Maintainers}

[react-native-bot]

I am closing this issue because it does not appear to have been verified on the latest release, and there has been no followup in a while.

If you found this thread after encountering the same issue in the latest release, please feel free to create a new issue with up-to-date information by clicking here.

[JuliusKoronci]

Too bad as it is still there

[deflorilemarului]

issue still there. check Modal.js

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

it says: 'white'
RN version 0.58.3

[patrickkempff]

@JuliusKoronci & @deflorilemarului it would be really awesome if one of you could submit an PR with the fix.

[tcanbolat]

I was able to find a way around it by adding a View Parent component within the Modal and changing the background color of the View.
example:

`

 <Modal visible animationType="slide">
   <View style={{ backgroundColor: "green"}}>
     {/* children components*/}
   </View>
 </Modal>

`

[stepdi]

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

[junaiddarajat]

@stepdi Did you manage to have a workaround for the slide animation issue? I don't want to use any other library just for this