Closed theapache64 closed 5 years ago
and how do i do that ? could you please be more specific ?
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>
);
}
}
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>
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.
Yeah, I saw that. but it's not working unfortunately. :/
Re-opening 👍
I think what is causing this behaviour is the blur overlay swallowing the inputs.
Not working as well. Any update?
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 ;)
Any chance to get this fix included into the next release?
Does the backdrop show up normally with the change? Would you submit a PR? Thanks!
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.
This feature is not available right now. If you want you can expose this feature from
onBackdropPress
fromreact-native-modal
.