React Native _this2.refs.myinput.focus is not a fu

Question

Using React-Native, I have a custom component which extends from TextInput like so:

TextBox.js

...
render() {
  return (
  <TextInput
    {...this.props}
    style={styles.textBox}/>
  );
}
...

MyScene.js (imports TextBox.js)

...
render() {
  render(
    <View>
      <TextBox
        rel='MyFirstInput'
        returnKeyType={'next'}
        onSubmitEditing={(event) => { this.refs.MySecondInput.focus(); }}/>

      <TextBox
        ref='MySecondInput'/>
    </View>
  );
}

When I build the app and press next on the keyboard when focusing on MyFirstInput, I expect MySecondInput to be in focus, instead I get the error:

_this2.refs.MySecondInput.focus is not a function

What could the error be? Is it something to do with the scope of this? Thanks.

Answer 1

This is because focus is a method of TextInput, and it is not present in your extended version.

You can add a focus method to TextBox.js as below:

focus() {
    this.refs.textInput.focus();
},

and add a ref to the TextInput

render() {
  return (
  <TextInput
    {...this.props}
    ref={'textInput'}
    style={styles.textBox}/>
  );
}

Answer 2

Other option is to pass the reference by props from TextBox.js for TextInput.

MyScene.js (imports TextBox.js)

<TextBox      
 refName={ref => { this.MySecondInput = ref; }}
/>

TextBox.js

 <TextInput
    {...this.props}
    ref={this.props.refName}
    ... />

Answer 3

Maybe it's because the ref doesn't return an HTML element? I don't think it has to do anything with the this scope, it just says .focus is not a function, so it can't be executed probably because .focus does not exist on a non HTML element?

MDN .focus shows that it has to be an HTML element, maybe you should log the ref MySecondInput and see if you get an element?

Answer 4

If you wanted to do this in the modern React Version use

ref = { ref => this._randomName = ref }

If you want to access the method use

this._randomName.anyMethod()