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.