How to close modal in react native?

Question

I have add comment button when user clicks on add comment button he should be able to add and save comment. For comment save I have used Modal. Now I want to close Modal when user clicks outside Modal how can I do this is React Native ?

I am referring this -> Close react native modal by clicking on overlay? but the solution is not working in my case.

Note: I have added button to close modal but I want to close the modal by clicking outside it.

Code:

    <View>
            <Modal
            animationType="slide"
            transparent={true}
            visible={this.state.modalVisible}
            onRequestClose={() => {this.setModalVisible(false)}}>
            <TouchableOpacity  
            activeOpacity={1} 
            onPressOut={() => {this.setModalVisible(true)}}
            >
            <ScrollView 
            directionalLockEnabled={true} 
            contentContainerStyle={styles.scrollModal}
            >
            <TouchableWithoutFeedback>
            <View style={styles.commentModal}>
                <View style={{marginLeft: 20, marginRight: 20}}>
                    <Text style={styles.addCommentModal}>Add a Comment</Text>
                <View style={styles.textInputModal}>
                    <TextInput 
                        editable = {true}
                        maxLength = {40}
                        multiline = {true}
                        onChangeText={(text) => this.setState({text})}
                        value={this.state.comment_text}
                        onChangeText={(text) => this.setState({comment_text: text})}
                        style={{borderRadius: 1}}
                    />
                </View>
                <View style={styles.modalBtnContainer}>
                    <TouchableOpacity onPress={() => this.addComment(this.state.comment_text, logged_in_user.id, marketingPlanId)}>
                        <Text style={styles.saveCommentModal}>Save Comment</Text>
                    </TouchableOpacity>
                </View>
                <View style={styles.modalBtnContainer}>
                    <TouchableOpacity onPress={() => this.setModalVisible(false)}>
                        <Text style={styles.closeCommentModal}>Close</Text>
                    </TouchableOpacity>
                </View>
                </View>
            </View>
            </TouchableWithoutFeedback> 
            </ScrollView>
            </TouchableOpacity> 
            </Modal>
        </View>

CSS:

 commentModal: {
        position: 'absolute', 
        bottom: 0, 
        backgroundColor: '#fff', 
        height: height/2, 
        width: width
    },
    addCommentModal: {
        fontSize: 18, 
        color: '#333', 
        marginTop: 20, 
        fontFamily: 'bold', 
        fontWeight: '500' 
    },

@Rizwanatta I have updated the code please check it. I want to close modal when user clicks outside the modal and currently modal is closed only by close button. — fun joker, Jan 11 '19 at 07:18
you have placed the code of model in component's render or are you making a seprate component for it? — Rizwan Atta, Jan 11 '19 at 08:40
@Rizwanatta I have placed Modal inside render() of component — fun joker, Jan 11 '19 at 09:12

score 1 · Answer 1 · answered Jan 10 '19 at 15:43

1

You can add button in modal to close it. Try

<Modal>
....
 <TouchableOpacity onPress={() =>this.setState({modalVisible:false}))}>
    <Text style={styles.saveCommentModal}>Close</Text>
 </TouchableOpacity>
....
</Modal>

answered Jan 10 '19 at 15:43

Rajan Lagah

2,373
1
24
40

I have added button to close modal but I want to close the modal by clicking outside it. – fun joker Jan 10 '19 at 15:44

score 1 · Accepted Answer · answered Jan 10 '19 at 19:26

1

notice that in the link you posted they are using onPressOut for <TouchableOpacity/> component and you are using onPress, he is also using this at the very beginning if (!this.state.modalVisible) return null

answered Jan 10 '19 at 19:26

Uziel Valdez

2,040
1
15
20

I have updated the code please check it. I want to close modal when user clicks outside the modal and currently modal is closed only by close button – fun joker Jan 11 '19 at 07:19
you are still being use `onPress` instead of `onPressOut` – Uziel Valdez Jan 11 '19 at 19:12
I have updated the code but when I click on ADD comment button to open modal it does not open modal and then the screen freezes I need to reload the application. – fun joker Jan 12 '19 at 15:37
did you add the `if` statement at the top of the render as in the example on the link you posted? – Uziel Valdez Jan 14 '19 at 02:26
Check this code https://pastebin.com/9k7aaaGR it is still not working the screen freezes after opening modal – fun joker Jan 14 '19 at 06:29

How to close modal in react native?

2 Answers2

Linked