How do I dim background when Modal is displayed in react-native

Question

I have got the modal as expected but I could not dim the background.

I also tried backdropColor = {'green'} backdropOpacity = {1} but still the background exists. I need help for this. Below is my code:

import Modal from "react-native-modal";
    <View 
          style={styles.MainContainer}>
            <Modal
                backdropColor={'green'}
                backdropOpacity= {1}
                animationType={"slide"}
                visible={this.state.ModalVisibleStatus}
                onRequestClose={ ()=>{ this.ShowModalFunction(!this.state.ModalVisibleStatus)}}>

              <View style={{ flex:1, justifyContent: 'center', alignItems: 'center' }}>
                <View style={styles.ModalInsideView}>
                  <Text 
                      style={styles.TextStyle}>
                      Enter the Number of Tickets to be Printed. 
                   </Text>

                    <NumberSpinner
                    packageCount={this.state.tickets} min={0} max={20}
                    onChange={this.ticketsCount}
                  />

                 <Button  
                      title="Print Tickets" 
                       onPress={() => { this.ShowModalFunction(!this.state.ModalVisibleStatus)}}/>
              </View>
            </View>
          </Modal>

Answer 1

You are using the wrong prop to trigger the Modal. As mentioned in the docs , you need to use isVisible to show the modal and not visible.

Therefore for the backdropColor and backdropOpacity to work you need to change your code as

<Modal
       backdropColor={'green'}
       backdropOpacity= {1}
       animationType={"slide"}
       isVisible={this.state.ModalVisibleStatus}

Answer 2

Please note the Accepted answer is for library react-native-modal.

For dimming/blurring the background of modal of basic React Native component.

Enclose all your content inside <Modal> under a <View> and provide a backgroundColor and opacity to the style as below:

<Modal visible animationType="slide">
   <View style={{ backgroundColor: 'rgba(0, 255, 0, 0.5)'}}>
     {/* children components*/}
   </View>
 </Modal>