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

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;