Custom Background Colour for Modal Display

[ghost]

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

[alexgshaw]

Any updates here? I'm also trying to dim the background without dealing with the slide animation issue, but I'm not having any luck.

[victorcrbt]

Any updates here? I'm also trying to dim the background without dealing with the slide animation issue, but I'm not having any luck.

I manage to workaround this by creating an absolute positioned view taking the entire screen and putting it outside the modal, like this:

export const CustomModal = () => {
   ...rest of the code

  return (
    <>
     <Backdrop />
     <Modal transparent>
      {...}
     </Modal>
    </>
  )
}

Problem is, even though the modal is transparent, it still prevents press events on the content behind it. I wish to put an onPress on the Backdrop to close the modal, but that doesn't seem to work. Still trying to figure it out some way to do this.

[HarryHighPants]

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

I was able to make the dimmed background fade independently from the sliding modal using two Modals
React-native can only show one modal at a time but you can still nest them

Here's a code snippet of a sliding modal with a fading background:

<Modal
  transparent
  visible={isVisible}
  animationType="fade"
  onRequestClose={onClose}>
    <View className="w-full h-full bg-black opacity-25" />
    <Modal visible={isVisible} animationType="slide" transparent>
        <Pressable onPress={onClose} className="flex-1" />
        <View className="bg-white rounded-2xl p-7">
            <Text>My modal text</Text>
        </View>
    </Modal>
</Modal>

[alexgshaw]

That works for me too. The only problem is that the animations don't run parallel but rather consecutively. Has anyone found a workaround for this?