onBackdropPress is not working

[mmazzarolo]

This feature is not available right now. If you want you can expose this feature from onBackdropPress from react-native-modal.

[theapache64]

and how do i do that ? could you please be more specific ?

[mmazzarolo]

Actually, I just noticed that you can simply set the onBackdropPress on the Dialog.Container component. The onBackdropPress prop is described here.

Here is a complete example:

import React, { Component } from "react";
import { Text, TouchableOpacity, View } from "react-native";
import Dialog from "react-native-dialog";

export default class DialogTester extends Component {
  state = {
    dialogVisible: false
  };

  showDialog = () => {
    this.setState({ dialogVisible: true });
  };

  hideDialog = () => {
    this.setState({ dialogVisible: false });
  };

  handleDelete = () => {
    // The user has pressed the "Delete" button, so here you can do your own logic.
    // ...Your logic
    this.setState({ dialogVisible: false });
  };

  render() {
    return (
      <View>
        <TouchableOpacity onPress={this.showDialog}>
          <Text>Show Dialog</Text>
        </TouchableOpacity>
        <Dialog.Container visible={true} onBackdropPress={this.hideDialog}>
          <Dialog.Title>Account delete</Dialog.Title>
          <Dialog.Description>
            Do you want to delete this account? You cannot undo this action.
          </Dialog.Description>
          <Dialog.Button label="Cancel" onPress={this.hideDialog} />
          <Dialog.Button label="Delete" onPress={this.handleDelete} />
        </Dialog.Container>
      </View>
    );
  }
}

[theapache64]

I tried, and it's not working.

<Dialog.Container onBackdropPress={()=>console.warn('Back button pressed')} visible={true}>

          <Dialog.Title>Sample title</Dialog.Title>

</Dialog.Container>

[mmazzarolo]

Unfortunately I can't test it at the moment.

Seems weird 🤔 , you can see at this line that Dialog.Container accepts and spreads all the modal props.

[theapache64]

Yeah, I saw that. but it's not working unfortunately. :/

[mmazzarolo]

Re-opening 👍

[mmazzarolo]

I think what is causing this behaviour is the blur overlay swallowing the inputs.

[psolom]

Not working as well. Any update?

[psolom]

I found the root of the issue. You have to remove flex styling from this line. So the final container styling should looks like:

  container: {
    justifyContent: "center",
    alignItems: "center"
  },

This fix deserves a new minor release ;)

[psolom]

Any chance to get this fix included into the next release?

[mmazzarolo]

Does the backdrop show up normally with the change? Would you submit a PR? Thanks!

[gianpaj]

Thanks for the fix @fjmorant 👏

The PR https://github.com/mmazzarolo/react-native-dialog/pull/26 is waiting to be merged. I've tested it by changing the Container.js file manually from the node_modules folder.