Close modal when clicked outside of <Modal> in react native - react-native

Question

I am making an application in react native. Here I am able to open Modal at a click and also able to close the modal when clicked inside of the Modal. But I also want to close the Modal when clicked outside of it.
Below is my code:
import React, { useState } from 'react';
import { View, Text, TouchableOpacity, Modal, TouchableWithoutFeedback, Alert } from 'react-native';
function Main({ navigation }) {
const [modalVisible, setModalVisible] = useState(false);
return (
{/* This is not working */}
<TouchableWithoutFeedback onPress={() => { setModalVisible(!modalVisible); }}>
<View>
{/* MODAL FOR LANGUAGE */}
<Modal animationType="slide" transparent={true} visible={modalVisible}>
<View>
<Text>Select Language</Text>
</View>
{/* Close modal*/}
<TouchableOpacity onPress={() => { setModalVisible(!modalVisible); }} >
<Text>English</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => { setModalVisible(!modalVisible); }} >
<Text>Hindi</Text>
</TouchableOpacity>
</Modal>
<View>
{/* Open modal*/}
<TouchableOpacity onPress={() => { setModalVisible(true); }} >
<Text>Language</Text>
</TouchableOpacity>
</View>
</TouchableWithoutFeedback>
);
}
I hope from the comments you can see that I am opening modal when clicked on <Text>Language</Text> , and I am able to close modal when clicked on <Text>English</Text> and <Text>Hindi</Text>, which is inside the modal.
To close the modal when clicked on outside of modal I used <TouchableWithoutFeedback onPress={() => { setModalVisible(!modalVisible); }}> , but this is not working.
NOTE: I have intentionally removed all the styling part so that my code here looks clean and that I can make it clear about what I want.

Answer 1

I believe when modal is visible it covers all the screen and you do not have access to the underlaying components. Did you try to create a backdrop inside modal?
Here's an example:
return (
<View>
{/* MODAL FOR LANGUAGE */}
<View>
{/* Open modal*/}
<TouchableOpacity
onPress={() => {
this.setModalVisible(true);
}}
>
<Text>Language</Text>
</TouchableOpacity>
</View>
<Modal animationType="slide" transparent={true} visible={modalVisible}>
<TouchableOpacity
activeOpacity={0.5}
style={{
height: '100%',
backgroundColor: '#e74655',
opacity: 0.5
}}
onPress={() => {
this.setModalVisible(!modalVisible);
}}
/>
<View
style={{
width: '100%',
height: '80%',
borderWidth: 1,
borderColor: '#000',
position: 'absolute',
bottom: 0,
backgroundColor: '#fff'
}}
>
<View>
<Text>Select Language</Text>
</View>
{/* Close modal*/}
<TouchableOpacity
onPress={() => {
this.setModalVisible(!modalVisible);
}}
>
<Text>English</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
this.setModalVisible(!modalVisible);
}}
>
<Text>Hindi</Text>
</TouchableOpacity>
</View>
</Modal>
</View>
)
Which produces this result, where the red area is touchable and closes the modal when you press on it