How to make modal (popup) disapear when pressed outside of it

Question

I am working on a todo list that can upload, delete and edit the uploaded thing to do on react native. When the edit button is pressed a modal appears in form of a pop up, my goal to make that when it is tapped in the surroundings of the modal(outside the modal) the modal closes. I have been trying to make that work and non of the ways I have tried have worked. I was thinking in using TouchableWithputFeedback for this but the way I made it didnt work. How can this goal be achieved?

app.js

      <FlatList
        keyExtractor={(item, index) => item.key}
        data={ todos }
        renderItem={({ item }) => <TodoItem  title={item.value} pressHandler={pressHandler.bind(this, item.key)} onPressModal={() => {setAddMode(true)}}/> }
      />
      <EditModal visible={addMode} onCancel={() => {setAddMode(!addMode)}}></EditModal>

TodoItem.js

        <View style={styles.items}>
            <View style={styles.itemContainer}>
                <Text style={styles.itemText}>{props.title}</Text>
                <View style={styles.btnContainer}>
                    <Buttons onPress={props.pressHandler} title="Delete" style={styles.itemBtn}></Buttons>
                    <Buttons title="Edit" style={styles.editBtn} onPress={props.onPressModal}></Buttons>
                </View>
            </View>
        </View>

EditModal.js (I tried using onCancel on the touchablewithoutfeedback but it didnt work, the onCancel that is on the button does work by some reason)

import React from 'react';
import { Modal, StyleSheet, View, TextInput, TouchableWithoutFeedback} from 'react-native';
import Buttons from '../components/Buttons';

const EditModal = props => {
    return (
        <TouchableWithoutFeedback onPress={props.onCancel}>
            <View style={styles.center}>
                <Modal visible={props.visible} animationType="slide" transparent={true}>
                    <View style={styles.editModal}>
                        <TextInput style={styles.modalTxt}/>
                        <Buttons title="Edit" style={styles.modalBtn} onPress={props.onCancel}></Buttons>
                    </View>
                </Modal>
            </View>
        </TouchableWithoutFeedback>
    );
};

const styles = StyleSheet.create({
    center: {
        
        display: 'flex',
        position: 'relative',
        alignItems: 'center',
        justifyContent: 'center',

    },
    modalTxt: {
        borderWidth: 1,
        borderColor: '#FF6666',
        paddingVertical: 10,
        padding: 5,
        borderRadius: 6,
    },
    modalBtn: {
        borderWidth: 1,
        backgroundColor: '#FF6666',
        borderColor: '#FF6666',
        paddingVertical: 10,
        padding: 5,
        marginTop: 10,
        borderRadius: 6,
    },
    editModal: { 
        top: '40%',
        width: '80%',
        height: '20%',
        backgroundColor: "white",
        borderRadius: 20,
        padding: 35,
        alignSelf: "center",
        justifyContent: 'center',
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 2
        },
        shadowOpacity: 0.30,
        shadowRadius: 4,
        elevation: 5
    },
});

export default EditModal;

https://stackoverflow.com/questions/32553158/detect-click-outside-react-component — epascarello, Jul 31 '20 at 16:34

score 0 · Answer 1 · answered Jul 31 '20 at 01:52

0

try this ...

render() { 
  if (!this.state.modalVisible)
    return null
  return (
     <View>
        <Modal 
          animationType="fade"
          transparent={true}
          visible={this.state.modalVisible}
          onRequestClose={() => {this.setModalVisible(false)}}
        >
          <TouchableOpacity 
            style={styles.container} 
            activeOpacity={1} 
            onPressOut={() => {this.setModalVisible(false)}}
          >
            <ScrollView 
              directionalLockEnabled={true} 
              contentContainerStyle={styles.scrollModal}
            >
              <TouchableWithoutFeedback>
                <View style={styles.modalContainer}>
                  // Body of your modal content
                </View>
              </TouchableWithoutFeedback>
            </ScrollView>
          </TouchableOpacity>   
        </Modal> 
     </View>
  )
}

// Then on setModalVisible(), you do everything that you need to do when closing or opening the modal.

setModalVisible = (visible) => {
    this.setState({
        modalVisible: visible,
    })
}

answered Jul 31 '20 at 01:52

mainak

1,886
2
9
19

So I would have to add this to the EditModal.js file right?const [ modalVisible, setModalVisible] = useState(false); + your code – Jul 31 '20 at 02:15
Sorry I am on the phone – Jul 31 '20 at 02:17
Not necessary but thank you I will try your code tomorrow morning – Jul 31 '20 at 02:19
Please put back here your status... :) – mainak Jul 31 '20 at 02:21
One more question, what is the last setModalVisible function for? Doesn’t the useState(false) already tell if the modal should be visible or not? This question might be obvious for you but I just started learning react this week – Jul 31 '20 at 02:24
That's not a problem... This is how we learn... setModalVisible is a class function, if you are doing with functional component, just call onPressOut={() => setModalVisible(false} , it will work same. And remove that below function – mainak Jul 31 '20 at 02:31
Thankyou that makes sense, what kind of projects you suggest working on after this one taking in consideration I am very very new? I was thinking in something with user auth but it seems to be complex because I would have to add a database – Jul 31 '20 at 02:36
1st clear RN and React basics, that will help future work faster. For now just pickup up any design/ mock and start design and functionalities . – mainak Jul 31 '20 at 02:38
Mainak I am getting this error `"setModalVisible" is read-only`, I copied your code and I added `const [modalVisible, setModalVisible] = useState(false);` and below that I added setModalVisible class function – Juan Martin Zabala Jul 31 '20 at 13:30
I tried erasing everything and started using {props.onCancel} and {props.visible} together with the return part of your code and I could just get rid of the modal if I pressed on edit or push the modal down but it didnt work if I press outside the modal – Juan Martin Zabala Jul 31 '20 at 13:45
I added the code I used with yours that is returning the read-only error I realy hope it helps – Juan Martin Zabala Jul 31 '20 at 14:03

score 0 · Accepted Answer · answered Jul 31 '20 at 21:34

0

to solve this problem, I used a library called 'react-native-modal' which the work very easy. Here is the link https://github.com/react-native-community/react-native-modal

answered Jul 31 '20 at 21:34

Juan Martin Zabala

743
2
9
29

Try not to use lib if you can achieve the same with core components. – mainak Aug 01 '20 at 09:54

How to make modal (popup) disapear when pressed outside of it

2 Answers2