react native TouchableOpacity on press issue - reactjs

Question

I have a modal - react-native-modal - I want when it pops up and the user pressed out of the modal's Box that should disappear the modal , so i have used TouchableOpacity it works only if you click inside the box please see my image attached file.
this is my code :
import Modal from 'react-native-modal';
const TeskModal = ({isVisibles, onCallBaclk, deleteCurrenteTask , hideit}) => (
<View>
<TouchableOpacity onPress ={ () => hideit()}>
<Modal
isVisible = {isVisibles}
animationIn = {'zoomInDown'}
animationOut = {'zoomOutUp'}
animationInTiming = {500}
animationOutTiming = {500}
backdropTransitionInTiming = {1000}
backdropTransitionOutTiming = {1000}
>
<TouchableOpacity onPress ={ () => hideit()}>
<View style={style.modal}>
<View style={style.textView}>
<Text>
Change State Or Delete.
</Text>
</View>
<View style = {style.buttonView} >
<Button style={style.buttonChangeStatus} title ="Delete Task" onPress ={ () => deleteCurrenteTask()} />
<Button style={style.buttondelete} title = " Change State" onPress ={ () => onCallBaclk()} />
</View>
</View>
</TouchableOpacity>
</Modal>
</TouchableOpacity>
</View>
);
export default TeskModal;
here is my image
could you please help me to solve this issue.

Answer 1

There is a function called onBackdropPress in react-native-modal. You can call a function when the backdrop(i.e. outside the area of the modal) is pressed.
<Modal
{... otherProps }
onBackdropPress = {() => hideIt()}
/>
The above code will do it fo you.

Answer 2

There is a prop that you can pass which will take care of performing the function that you pass to the prop in case user press outside of the modal box. This way you will not need hideit()}> etc.
eg:
<Modal
isVisible={isVisible}
{...otherProps}
onBackdropPress={this.hideit()}>
{...content}
</Modal>
I hope this helps. Please let me know if this is what you are looking for.