Tap outside to close

[Doko-Demo-Doa]

Is there a way to implement that function? Right now when I tap on the darkened region, the modal doesn't close.

[mmazzarolo]

Hey!
It should be possible by toying a bit with the touchable options of this View.
Would you mind giving it a try and submitting a PR?
Otherwise I'll take a look at it in my spare time :)

[DavidKongDesheng]

😆 pls add this function~~ thanks

[Doko-Demo-Doa]

Thank you @mmazzarolo , actually I fixed using exactly same method you mentioned. It works, but since the first image in your preview images (on README.md) does it correctly, I thought it was implemented already, wasn't it?

[DavidKongDesheng]

@Doko-Demo-Doa according to the source code, haven't implemented yet, there is no close event on backdrop view or you can do sth like this, not so good but should be work.

<TouchableWithoutFeedback onPress={() => this.setState({ visible: false })}>
        <Modal isVisible={this.state.visible}  ...>
            <TouchableWithoutFeedback onPress={() => {}}>
                    ... your custom view
            </TouchableWithoutFeedback
       </Modal>
</TouchableWithoutFeedback>

[mmazzarolo]

@Doko-Demo-Doa oh wow, honestly I don't remember how I implemented it for that screenshot (I did it in a customized version of this lib 😞 ).

@DavidKongDesheng the problem with that solution is that clicking everywhere on the modal will close it.
In my opinion the right solution would be using onStartShouldSetResponderCapture (or something similar in the right place.
The perfect solution would be that:

• The backdrop should respond to the user touch (end by default trigger onClose or onBackdropPress);
• The view content should not respond to the backdrop touch, of course;
• The view content can have another independent button/touchable component inside.

What do you think guys?

Also, thank you @Doko-Demo-Doa and @DavidKongDesheng for the discussion, any feedback is of course warmly welcomed! 😸

@Doko-Demo-Doa could you share with us your solution?

[mmazzarolo]

I played a bit with it.
It seems that the right way to handle it is by applying something like this:

onStartShouldSetResponder={() => {
  console.log('You pressed the backdrop!');
  return true;
}}

to the backdrop view.

The problem with this approach is that it won't work correctly if you're centering the modal content using this:

content: {
    flex: 1,
    justifyContent: 'center'
  }

...which is the default style applied to the content.

I guess we should wait until react-native 0.43 stable lands and try changing that style to the new margin: auto, which I hope will make the backdrop press work correctly.

I'm obviously open to discussions on the matter :)

[DavidKongDesheng]

@mmazzarolo On my solution I added two touch events, one for Modal itself which will close the modal, the other one is on the Modal content view which will do nothing 😸, so only when you click the backdrop will close the modal.
<TouchableWithoutFeedback onPress={() => this.setState({ visible: false })}>
<Modal isVisible={this.state.visible} ...>
<TouchableWithoutFeedback onPress={() => {}}>
... your custom view
</TouchableWithoutFeedback

Yup, the right solution should be make the backdrop respond to user touch.

[mmazzarolo]

Oh, nice! @DavidKongDesheng did you test your solution?
Do you think it works correctly in most cases?
Would you mind pasting here your complete snippet?
Thanks!

[DavidKongDesheng]

@mmazzarolo Just added touch event to your example code, you can download and try, but this is not the best way to implement.
app.js.zip

[Doko-Demo-Doa]

It seems that RN's modal component is pretty meh. If there's something like Dialog on Android or UIAlertView on iOS, it would be much better in this case :(

[davidroman0O]

Hi,

I did exactly the same thing as @DavidKongDesheng but still don't working on my side !

<TouchableWithoutFeedback onPress={() => this.setState({ modalVisible: false })}>
  <Modal transparent={true} ref="modal" visible={this.state.modalVisible} onRequestClose={this.close.bind(this)} animationType={this.state.animationType}>
    {this.renderOptionList()}
  </Modal>
</TouchableWithoutFeedback>

Or maybe i don't make it well... no ?

react-native 0.42.3

[emalorenzo]

Hi! For me the solution of @DavidKongDesheng works great 🔥
This is my code:

`
constructor(props) {
super(props);
this.state = {
isModalVisible: false
}
}

_showModal() {
this.setState({ isModalVisible: true })
}

_hideModal() {
this.setState({ isModalVisible: false })
}

render() {
const { alerts, showAlert } = this.props;
return (

    <TouchableWithoutFeedback onPress={() => this._hideModal() }>
      <Modal style={{margin: 0}} isVisible={this.state.isModalVisible}>
        <AccountModal />
      </Modal>
    </TouchableWithoutFeedback>

    ....`

Hope to be helpfull!

[davidroman0O]

@emalorenzo Thanks! But it doesn't work :(

I don't know why it doesn't triggered the background :/