How can I get the keyboard to dynamically update when returnKeyType changes?

user_105367 0
Viewed 547

As a simplified example, I have a setup of

render() {
  return (
    <View>
      <TextInput
        onChangeText={text => this.setState({ email: text })}
        returnKeyType={
          (this.state.email !== '' && this.state.password !== '') ? 'go' : 'next'
        }
      />
      <TextInput
        onChangeText={text => this.setState({ email: text })}
        returnKeyType={
          (this.state.email !== '' && this.state.password !== '') ? 'go' : 'next'
        }
      />
    </View>
  )
}

Then when I focus on the email field, I expect the Return key to say Next. And it does. And I enter text.

Then when I focus on the password field, I expect it to still say Next, and it does. And I enter text.

But now I expect it to change to "Go". But it doesn't. I've found an issue on RN that says I can change the key field on the TextInputs which technically changes the keyboard, but it also blanks out the input fields so that's not a useful solution.

How do I get the keyboard to update dynamically?

react-native
1 Answers

Hopefully this will solve your issue

render() {
  let passwordReturnKey = this.state.password.length ? 'go' : 'next';
  return (
    <View>
      <TextInput
        style={{ height: 40, borderColor: "gray", borderWidth: 1 }}
        onChangeText={text => this.setState({ email: text })}
        returnKeyType={'next'}
      />
      <TextInput
        style={{ height: 40, borderColor: "gray", borderWidth: 1 }}
        onChangeText={text => this.setState({ password: text })}
        returnKeyType={passwordReturnKey}
      />
    </View>
  )
}

user_55802400
Related