Tap outside of modal to close modal (react-native-modal)

Question

Anyone has experience of implementing react-native-modal? While I'm using it, modal isn't closed when I tap outside of modal.

Here is what I've tried

Adding onBackdropPress(() => {this.props.hideModal()})
Adding TouchableWithoutFeedback inside and outside of components
and many other approaches...

Here is my the screen where I want to show my modal.

render() {
    return (
        <View style={{flex: 1}}>
            <ScrollView>
               // CONTENT HERE
               {this._renderModal()} //rendering modal here
               <FABs onFABsPress={this._showModal} /> // I open Modal when I press the FABs button
            </ScrollView>
        </View>
    )
);

_renderModal = () => {
    return (
      <CameraImageSelectModal
        hideModal={this._hideModal}
        isModalVisible={this.state.isModalVisible}
        navigation={this.props.navigation}
      />
    )
}

Here is modal component : CameraImageSelectModal.js

render() {
    let { isModalVisible } = this.props;
    return (
      <View>
        <Modal
          isVisible={isModalVisible}
          onBackdropPress={() => {console.log('hey')}}>
          transparent={true}>
          <View style={styles.modalContainer}>
            <View style={styles.modalTitleTextContainer}>
              <Text style={styles.modalTitleText}>Hello World</Text>
            </View>
            <View style={styles.modalContentTextContainer}>
              <Text style={styles.modalContentText}></Text>
            </View>
            <View style={styles.modalButtonContainer}>
              <Button transparent onPress={this._handleCameraPress}>
                <Text style={[styles.modalText, styles.black]}>Camera</Text>
              </Button>
              <Button transparent onPress={this._handleAlbumPress}>
                <Text style={styles.modalText}>Album</Text>
              </Button>
            </View>
          </View>
        </Modal>
      </View>

Thanks!!

score 5 · Answer 1 · edited Dec 07 '18 at 14:09

I don't think the modal has that built in functionality, but you could create your own component that does. Here is a quick implementation. You might have to mess around with padding and margin to get it how you like, but this will allow the modal to be dismissed when pressing outside.

import React, { Component } from "react"
import { Modal, StyleSheet, View, TouchableHighlight } from "react-native"

const styles = StyleSheet.create({
  container: {
    zIndex: 1,
    margin: 25,
    backgroundColor: "white"
  },
  background: {
    flex: 1
  },
  outerContainer: {
    position: "absolute", 
    top: 0, 
    left: 0, 
    right: 0, 
    bottom: 0, 
    justifyContent: "center"
  }
})

const MyModal = props => (
  <Modal transparent={true} animationType={"slide"} visible={props.visible} onRequestClose={() => props.onRequestClose()}>
    <TouchableHighlight style={styles.background} onPress={() => props.onRequestClose()} underlayColor={"transparent"}>
      <View />
    </TouchableHighlight>
    <View style={ styles.outerContainer }>
      <View style={styles.container}>
        {props.children}
      </View>
    </View>
  </Modal>
)

export { MyModal }

Does this work?? Here is night now. I will test it on line tmr. Thanks! — merry-go-round, Oct 16 '17 at 17:28
Sorry, I just realized you were using the package react-native-modal. I thought you were just using react native's built in modal. This will not work with the package, but you could still use this. — wizloc, Oct 16 '17 at 18:16
No need to sorry, friend. :) I just figured out and posted my answer. I can't accept your answer for this question but your answer is definitely valuable! Voted up :) — merry-go-round, Oct 17 '17 at 03:24

score 4 · Accepted Answer · answered Oct 17 '17 at 03:23

4

I just figured out why onBackdropPress = {() => console.log("Pressed")} didn't work..!!! onBackdropPress property was added since its version 3.xx and I was using 2.5.0 version.

So yarn update react-native-modal solved the issue.

If anyone encounters the problem that the library/component doesn't work as expected as you seen on documentation, try to check your package version number!

Cheers!

answered Oct 17 '17 at 03:23

merry-go-round

4,533
10
54
102

1

This would work if you want to use `react-native-modal` from @react-native-community. But it will not work with the inbuilt Modal of `react-native` – Murtuza Sep 29 '20 at 15:56

score 0 · Answer 3 · answered Dec 28 '22 at 06:07

 <Modal
  isVisible={isModalVisible}
  customBackdrop={
    <View
      style={styles.backDropContainer}
      onTouchEnd={() => setModalVisible(false)}
    />
  }
  onBackdropPress={() => setModalVisible(false)}>
  <View style={styles.modalContainer}>
    <FlatList data={DATA} renderItem={() => <Text>hehehe</Text>} />
  </View>
</Modal>

Style:

const styles = StyleSheet.create({
  backDropContainer: {
    flex: 1,
    backgroundColor: 'black',
    opacity: 0.5,
  },
  modalContainer: {
    flex: 0.5,
    backgroundColor: 'white',
    padding: 10,
    borderRadius: 10,
  },
});

Tap outside of modal to close modal (react-native-modal)

3 Answers3

Linked