Ui: TextInput ref methods are broken

[patrick-michelberger]

I try to call the focus() method on a TextInput ref. Such as

<TextInput ref="emailInput" onSubmitEditing={() => this.focusNextField('passwordInput')}/>
<TextInput ref="passwordInput"/>

// component method
focusNextField = (nextField) => {
  this.refs[nextField].focus();
};

However I get the following Error Message:
_this.refs[nextField].focus is not a function

The Reference Type seems to be different compared to the React Native core and doesn't offer methods such as focus()

[dculjak]

Hi Partric, this obviously is a bug/missing functionality. We're putting it in our roadmap for one of the next releases.

[lijy91]

Is there any temporary solution?

[JulianKingman]

Yes, if you copy the TextInput from this library (https://github.com/shoutem/ui/blob/develop/components/TextInput.js), add a ref at line 22, like so:
jsx <RNTextInput {...props} style={style} placeholderTextColor={props.style.placeholderTextColor} selectionColor={props.style.selectionColor} ref={(input) => this.props.inputRef(input)} />
Then, using that textinput, you can use the inputRef prop as you would a normal ref, like this:
jsx <TextInput inputRef={(input) => { this.textInput = input }} />
The input ref is now available via this.textInput

[neegool]

I'm trying out the temporary solution above, and I can't get it to work. I get the following error message: _this2.props.inputRef is not a function.

[neegool]

Okay, I found out that by making my own copy of TextInput , and adding a ref="textInput" prop to it, I was able to access the TextInput via this.refs[nextField].wrappedInstance.wrappedInstance.refs.textInput. This will work for me, for now. :)

[JulianKingman]

It sounds like you used a string based ref, its recommended to use a callback ref instead.

[steven-tib]

Hi, any progress on this bug?
I'm trying to set focus on my next textInput but cannot make it work.
thanks

[jenskuhrjorgensen]

For anyone ending up here struggling with focussing the next TextInput:
https://stackoverflow.com/a/45253129/3749432

[andyngdz]

This issue is still there. Kindly help us. Because this function is very basic.

[pindamonhangaba]

Workaround is to use connectStyle:

import { connectStyle } from '@shoutem/theme';
import {TextInput as RNTextInput} from 'react-native';

const TextInput = connectStyle('shoutem.ui.TextInput')((p) => (
  <RNTextInput {...p} ref={(a) => p.getRef(a)} />
));

[danalloway]

fixed in #471

[LouisGusta]

Ok, descobri que fazendo minha própria cópia do TextInput e adicionando um ref="textInput"prop a ele, consegui acessar o TextInput via this.refs[nextField].wrappedInstance.wrappedInstance.refs.textInput. Isso vai funcionar para mim, por enquanto. :)

can you help me by showing what you did in your code?

[LouisGusta]

Yes, if you copy the TextInput from this library (https://github.com/shoutem/ui/blob/develop/components/TextInput.js), add a ref at line 22, like so:

<RNTextInput
  {...props}
  style={style}
  placeholderTextColor={props.style.placeholderTextColor}
  selectionColor={props.style.selectionColor}
  ref={(input) => this.props.inputRef(input)}
/>

Then, using that textinput, you can use the inputRef prop as you would a normal ref, like this:

<TextInput inputRef={(input) => { this.textInput = input }} />

The input ref is now available via this.textInput

This solution resolve if I own two input component, but where try move to the next input (the third input in screen) , does not work
,
can you help me?