2
<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...

1 Answer 1

5

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:

Example

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.

Sign up to request clarification or add additional context in comments.

8 Comments

I just tested, that and it is not working. Maybe they do not extend from react native TextInput class.
Could you include a link to the github page in the post?
It does extend react-native TextInput as you can see here in line 30+
So, it must have a way of collecting what is on this Dialog.Input, right?
@YungGun - I disagree, it has 2 small relevant quotes and covers code, screenshots 2 snippets from the docs. It was relevant for the OP, also.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.