Use refs on Input so that we can focus the next text input

[avencat]

Hi, I tried your components today and I saw that we couldn't pass refs to the Input, so that we could focus the next element when clicking on the 'Enter'/'Next' button on the keyboard which is pretty much annoying. In fact, when we pass a ref to an Input, we get this error message:

Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.

Here is the code:

<Input onSubmitEditing={ (event) => {
    this.refs.PassInput.focus();
  }
}>
<Input ref='PassInput'>

And when we press enter, we get:

Cannot read property 'focus' of null

Can this library works with refs ? Or have you any idea on how could I focus the next input when clicking on 'Next' on my keyboard ?

Thanks for this wonderful library by the way !

[leandrojo]

Try:

on(event: string, ref: string) {
  this.refs[ref][event]();
}

<Input onSubmitEditing={() => this.on("focus", "password")} } />
<Input ref='password' />

[avencat]

I tried it, with:

constructor(props) {
  super(props);
  this.on = this.on.bind(this);
}

on(event: string, ref: string) {
  this.refs[ref][event]();
}

render() {
  <View>
    <Input onSubmitEditing={() => {this.on("focus", "password")} } />
    <Input ref='password' />
  </View>
}

and I still get the warning and the error when I press enter in the first FormInput. Here is a file to reproduce this behavior.