Is it possible to close react native modal by clicking on overlay when transparent
option is true
? Documentation doesn't provide anything about it. Is it possible?
Is it possible to close react native modal by clicking on overlay when transparent
option is true
? Documentation doesn't provide anything about it. Is it possible?
If I understood correctly, you want to close the modal when the user clicks outside of it, right ?
If yes, I searched for this some time ago and the only solution that I remember was this one (which is the one that I've been using so far):
render() {
if (!this.state.modalVisible)
return null
return (
<View>
<Modal
animationType="fade"
transparent={true}
visible={this.state.modalVisible}
onRequestClose={() => {this.setModalVisible(false)}}
>
<TouchableOpacity
style={styles.container}
activeOpacity={1}
onPressOut={() => {this.setModalVisible(false)}}
>
<ScrollView
directionalLockEnabled={true}
contentContainerStyle={styles.scrollModal}
>
<TouchableWithoutFeedback>
<View style={styles.modalContainer}>
// Here you put the content of your modal.
</View>
</TouchableWithoutFeedback>
</ScrollView>
</TouchableOpacity>
</Modal>
</View>
)
}
// Then on setModalVisible(), you do everything that you need to do when closing or opening the modal.
setModalVisible(visible) {
this.setState({
modalVisible: visible,
})
}
This is basically using a TouchableOpacity in the whole screen to get when the user clicks to close the modal. The TouchableWithoutFeedback is to avoid the TouchableOpacity to work inside of the Modal.
If you have a better solution, please share here.