React-native: Can't focus a TextInput

[GijsGoudzwaard]

I can't focus a TextInput with the code from an example app from this repo.

This is what I tried:
focusNextField = (nextField) => { this.refs[nextField].focus(); };

<TextInput ref='firstname' blurOnSubmit={false} returnKeyType='next' placeholder='Firstname' style={styles.input} onChangeText={(firstname) => { this.setState({firstname}); }} onSubmitEditing={() => this.focusNextField('surname')} />
<TextInput ref='surname' blurOnSubmit={false} returnKeyType='next' placeholder='Surname' style={styles.input} onChangeText={(surname) => { this.setState({surname}); }} />

But I get the error: undefined is not a function (evaluating '_this.refs[nextField].focus()')

[divye01]

Did you figure it out?

[GijsGoudzwaard]

@divye01 I had a conflict with a package: nativebase.io

[Haakh]

@GijsGoudzwaard How Did you solve it? while using NativeBase that is.

[joncursi]

I have this same problem and I'm not using Native Base. Any ideas? Seems like refs are deprecated on TextInputs now?

[joncursi]

Alright I figured it out. I almost opened up a new issue, but decided to make a repro, only to find out that react-native core TextInputs do in fact work per the documentation, so the issue was in my own code.

I am using a wrapper component called , which applies my own personal styles and sugar over React Native's core component. I had to do two things:

Put a ref on React Native's TextInput inside my TextInputWrapper component:

render() {
  return (
    <TextInput
      ...
      ref="TextInput"
      ...
    />
  );
}

Access that ref from my scene that uses TextInputWrapper:

_handleFocusNextField = (nextField) => {
  this.refs[nextField].refs.TextInput.focus();
}

render() {
  return (
    <View>
      <TextInputWrapper
        ...
        onSubmitEditing={this._handleFocusNextField.bind(this, 'password')}
        ...
      />
      <TextInputWrapper
        ...
        ref="password"
        ...
      />
    <View/>
  );
}

[uraniumreza]

_focus()_ is under _wrappedInstance_

Rewrite the function like this -

focusNextField = (nextField) => { this.refs[nextField].wrappedInstance.focus(); };

[programmerRishi]

I came up with another solution to this problem.

Put a ref on React Native's TextInput inside my Input component:

render() {
return (
...
ref={props.inputRef}
...
/>
);
}

Access that ref indirectly from the component that uses Input:

render() {
return (

...
onSubmitEditing={this.nextFocus.focus()}// nextFocus has the referece to TextInput in the Input //component
...
/>
...
inputRef={password => this.nextFocus = password }// inpuRef doesn't have a special meaning
...
/>

);
}
Following image explains the above used method. This image is a screenshot from the following :
[(https://reactjs.org/docs/refs-and-the-dom.html)]

[rodrix]

Hi everyone.
My scenario is < CustomBoladonesTextInput /> wrapping a RN < TextInput />.

I solved this issue as follow:

My form looks like:

<CustomBoladonesTextInput 
      onSubmitEditing={() => this.customInput2.refs.innerTextInput2.focus()}
      returnKeyType="next"
      ...
/>

<CustomBoladonesTextInput 
       ref={ref => this.customInput2 = ref}
       refInner="innerTextInput2"
       ...
/>

On CustomBoladonesTextInput's conponent definition, I pass the refField to the inner ref prop like this:

export default class CustomBoladonesTextInput extends React.Component {
        render() {
        return (< TextInput ref={this.props.refInner} ... />);
    }
}

And voila. Everything get back works again.
Hope this helps. :+1:

[ericjames]

FYI the last solution is the only one that currently works which seems bizarre. I guess basically refs can only register actual react-native components, not made up ones.