input text validate react native

Question

I've got the following code:

 <TextInput placeholder={"PID"}  keyboardType = 'numeric'  editable = {true}    maxLength = {10} value={this.state.text}  onChangeText={(text) => this.setState({text})} />   
 <Button title='NEXT' onPress= {() => navigate('service', { text: this.state.text})}> </Button>

And I want to validate the input field like this: On a press of the button go to the service page if the length of input is equal to 10. Else show an alert message.

How can I do this?

iuliu.net · Accepted Answer · 2018-07-30 22:01:31Z

2

manage = () => {
    if (this.state.text.length === 10) {
        navigate('service', { text: this.state.text})})
    } else {
        alert('Your PID must be exactly 10 characters!')
    }
}

render() {
    return (<Button onPress={this.manage} ... />)
}

edited Jul 30, 2018 at 22:01

iuliu.net

7,1958 gold badges52 silver badges72 bronze badges

answered Jul 30, 2018 at 14:00

sod.heretic

1261 silver badge13 bronze badges

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

1 Comment

iuliu.net Over a year ago

It's @sod.heretic's answer, I just helped with the formatting. :)

Yossi · Accepted Answer · 2018-07-30 13:57:08Z

0

Dear :) You need to use a routing package, like react-navigation or react-native-router-flux (I like the later), define your pages with it, and use a simple if else statement in the onPress function...

Each of the routing packages provide a simple call for programmatic navigation.

answered Jul 30, 2018 at 13:57

Yossi

6,0877 gold badges50 silver badges83 bronze badges

Collectives™ on Stack Overflow

input text validate react native

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related