Using react-native-dialog, how to get Dialog.Input content? - react-native

Question

<Dialog.Container visible={this.state.dialogSendEmailVisible}>
<Dialog.Title>Password Recovery</Dialog.Title>
<Dialog.Input label="Email"></Dialog.Input>
<Dialog.Button label="OK" onPress={this.handleSendEmail} />
</Dialog.Container>
I have this simple dialog, this is being used for password recovery purposes. I am not a FE developer, and I am not finding how can I pass the value typed on Email field to handleSendEmail function. Github and npm pages do not have any example.
Github page: https://github.com/mmazzarolo/react-native-dialog
PS: This can be a very react native basic feature, but I am not findindg a way...

Answer 1

Assuming that the Dialog Inputs/Button extend React Native's own - then you can call:
onSubmitEditing and onChangeText
From the docs:
onSubmitEditing
Callback that is called when the text input's submit button is
pressed. Invalid if multiline={true} is specified.
TYPE REQUIRED
function No
And
onChangeText
Callback that is called when the text input's text changes. Changed
text is passed as an argument to the callback handler.
TYPE REQUIRED
function No
It means something like below:
<Dialog.Input label="Email"
onChangeText={email => this.setState({email})}
value={this.state.email}
onSubmitEditing={
(event) => this.doSomethingWithSubmit(event)
}
>
</Dialog.Input>
UPDATE
So I have tested this, and it works as below - side note - I'm using Typescript so just remove the types ( : string) etc:
In Render
return (
<View>
<View>
<Button onPress={this.showDialog}>
<Text>Show Dialog</Text>
</Button>
<Dialog.Container visible={true}>
<Dialog.Title>Password Recovery</Dialog.Title>
<Dialog.Input label="Email" onChangeText={(email : string) => this.handleEmail(email)}
></Dialog.Input>
<Dialog.Button label="OK" onPress={this.handleSendEmail} />
</Dialog.Container>
</View>
</View>
)
handleEmail:
private handleEmail = (email : string) => {
console.log("email");
console.log(email);
}
Result:
Further
As a side note of this project, I noticed when I used Live reload - that the Dialog was never re-rendered rather, rendered on top of the old Dialog. I would take this into consideration. Perhaps it was my environment, but everything else worked fine.