React Native - Close modal when click out of it on IOS - react-native

Question

I'm new to React Native. I've added a modal to my app and I want it to be closed when I click outside the modal. But nothing happens when I click out of the modal.
Here is my code
import React from 'react';
import { View, Text, TouchableWithoutFeedback } from 'react-native';
import { Button } from 'react-native-elements';
import Modal from 'react-native-modal';
import { style } from './style';
const MenuTask = ({ isVisible, onDisapearCallBack }) => (
<TouchableWithoutFeedback onPress={() => onDisapearCallBack()}>
<Modal
isVisible={isVisible}
animationIn={'zoomInDown'}
animationOut={'zoomOutUp'}
animationInTiming={1000}
animationOutTiming={1000}
backdropTransitionInTiming={1000}
backdropTransitionOutTiming={1000}
>
<TouchableWithoutFeedback>
<View style={style.modal}>
<View style={style.textView}>
<Text style={style.modalTitle}>Que souhaitez vous faire sur la tâche ?</Text>
</View>
<View style={style.buttonView}>
<Button
buttonStyle={style.buttonDelete}
title = "Supprimer"
onPress={() => onDisapearCallBack()}
/>
<Button
buttonStyle={style.buttonChangeStatus}
title = "Changer status"
onPress={() => onDisapearCallBack()}
/>
</View>
</View>
</TouchableWithoutFeedback>
</Modal>
</TouchableWithoutFeedback>
);
export default MenuTask;
Please could you help me to figure this out. Thanks a lot :)
#ramashish tomar thanks for your help. I tried to apply what you said but still not working :(
Here is my code
import React from 'react';
import { View, Text, TouchableWithoutFeedback } from 'react-native';
import { Button } from 'react-native-elements';
import Modal from 'react-native-modal';
import { style } from './style';
const MenuTask = ({ isVisible, onDisapearCallBack }) => (
<View>
<Modal
isVisible={isVisible}
animationIn={'zoomInDown'}
animationOut={'zoomOutUp'}
animationInTiming={1000}
animationOutTiming={1000}
backdropTransitionInTiming={1000}
backdropTransitionOutTiming={1000}
>
<TouchableWithoutFeedback onPress={() => onDisapearCallBack()}>
<View style={style.modal}>
<TouchableWithoutFeedback>
<View>
<View style={style.textView}>
<Text style={style.modalTitle}>Que souhaitez vous faire sur la tâche ?</Text>
</View>
<View style={style.buttonView}>
<Button
buttonStyle={style.buttonDelete}
title = "Supprimer"
onPress={() => onDisapearCallBack()}
/>
<Button
buttonStyle={style.buttonChangeStatus}
title = "Changer status"
onPress={() => onDisapearCallBack()}
/>
</View>
</View>
</TouchableWithoutFeedback>
</View>
</TouchableWithoutFeedback>
</Modal>
</View>
);
export default MenuTask;
I can close the modal by clicking on it or on both buttons but not outside it. Really weird.
Here is the screenshot of the modal:
Modal screenshot
Maybe you could help me
Thanks in advance

Answer 1

You don't need TouchableWithoutFeedback outside the modal as by default modal covers the whole screen.
You can try something like this-
import React, { useState } from "react";
import {
View,
Text,
TouchableWithoutFeedback,
StyleSheet,
Button,
Modal,
TouchableOpacity
} from "react-native";
function MenuTask() {
const [isVisible, onDisapearCallBack] = useState(false);
return (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "orange"
}}
>
<Modal animationType="fade" transparent={true} visible={isVisible}>
<TouchableWithoutFeedback onPress={() => onDisapearCallBack(false)}>
<View style={{ flex: 1, backgroundColor: "rgba(0,0,0,0.7)" }}>
<TouchableWithoutFeedback>
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "white",
marginVertical: 150,
marginHorizontal: 10
}}
>
<Text>Modal Content</Text>
</View>
</TouchableWithoutFeedback>
</View>
</TouchableWithoutFeedback>
</Modal>
<Text style={{ color: "white", fontSize: 30 }}>Its page content</Text>
<TouchableOpacity
onPress={() => onDisapearCallBack(true)}
style={{
backgroundColor: "red",
borderRadius: 10,
paddingHorizontal: 30,
paddingVertical: 10,
marginTop: 20
}}
>
<Text style={{ color: "white", fontSize: 18 }}>Open Modal</Text>
</TouchableOpacity>
</View>
);
}
export default MenuTask;