Direct Manipulation doesn't work. Can't get TextInput value from ref

[wzup]

Environment

Environment:
 OS: macOS High Sierra 10.13.4
 Node: 8.11.3
 Yarn: Not Found
 npm: 5.6.0
 Watchman: 4.9.0
 Xcode: Xcode 9.4.1 Build version 9F2000
 Android Studio: 3.1 AI-173.4819257

Packages: (wanted => installed)
 react: 16.3.0-alpha.2 => 16.3.0-alpha.2
 react-native: 0.54.2 => 0.54.2

Description

ref doesn't work. I can't get value from TextInput

Reproducible Demo

No demo!
This real live code is enough for you to understand and reproduce

const first_name = ...
render() {
 return (
 <View> 
 <View style={{marginVertical: 10}}>
 <TextInput
 ref={ ref => this.first_name = ref }
 // This doesn't work. You give this as an example in your docs. But this doesn't work
 onChangeText={ text => this.first_name.setNativeProps({text}) }
 keyboardType={'default'}
 placeholder={'Your first name'}
 defaultValue={ first_name }
 />
 </View>
}

All these things do not work:

this.first_name._inputRef.value // => undefined
this.first_name.value // => undefined
this.first_name._getText() // => returns ONLY defaultValue. Never returns updated value.
this.first_name._inputRef._getText() // => not available

[kelset]

You give this as an example in your docs.

I just checked both these pages (1, 2) but there is nothing saying to use the ref element, where have you seen that code?

[wzup]

@kelset
Here https://facebook.github.io/react-native/docs/direct-manipulation#setnativeprops-to-clear-textinput-value

Precisely, this part. The only difference is that it is example for clearText.

 clearText = () => {
 this._textInput.setNativeProps({text: ''});
 }
 <TextInput
 ref={component => this._textInput = component}
 />
 <TouchableOpacity onPress={this.clearText}>
 <Text>Clear text</Text>
 </TouchableOpacity>

So in my case I do the same but differently, for capturing text typing

 <TextInput
 ref={ ref => this.first_name = ref }
 onChangeText={ text => this.first_name.setNativeProps({text}) }
 />

[react-native-bot]

It looks like you are using an older version of React Native. Please update to the latest release, v0.57 and verify if the issue still exists.

The ":rewind:Old Version" label will be removed automatically once you edit your original post with the results of running react-native info on a project using the latest release.

[wzup]

Update react-native? Stupid advice from RN team!
We can't do that just to test if your new version works or not.
Your project and support 👎

[kelset]

I hope you realise that:

1. you are not paying for any kind of support
2. React Native is a 0.x project so keeping up to date with the latest release is your responsability
3. we tests releases before rolling them out

I also suggest you start behaving accordingly to the CoC or we will enforce it.

[Oele]

Here's a workaround.

monkeypatch the TextInput class:

import { TextInput } from 'react-native';

TextInput.prototype.componentDidMount = function() {
 if (this.props.getRef) {
 this.props.getRef(this);
 }

 this._lastNativeText = this.props.value;
 if (!this.context.focusEmitter) {
 if (this.props.autoFocus) {
 this.requestAnimationFrame(this.focus);
 }
 return;
 }
 this._focusSubscription = this.context.focusEmitter.addListener(
 'focus',
 el => {
 if (this === el) {
 this.requestAnimationFrame(this.focus);
 } else if (this.isFocused()) {
 this.blur();
 }
 }
 );
 if (this.props.autoFocus) {
 this.context.onFocusRequested(this);
 }
};

Then use 'getRef' to get the actual ref:

<TextInput getRef={ref => …} …

[hramos]

The original report is for an older version of React Native, and the TextInput component has been updated significantly since then. Closing - if someone believes this is still an issue in 0.58 or later, please do feel free to open a new issue.