Close modal when clicked outside of in 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.

Possible answer here: https://stackoverflow.com/questions/40081732/can-touch-out-side-a-view-component-be-detected-in-react-native/60478348#60478348 — Sagar Shakya, Dec 26 '20 at 10:21
@SagarShakya It's way to complicated, and I think that answer is for web, not for native — pratteek shaurya, Dec 26 '20 at 10:38
Did you try this solution: https://stackoverflow.com/a/41731898/14757539 — Sagar Shakya, Dec 26 '20 at 12:07

score 1 · Answer 1 · answered Dec 26 '20 at 13:01

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

Close modal when clicked outside of in react native

1 Answers1