How to change the value of a TextInput using reference in React Native?

Question

I am using React Native 0.57.8 and React 16.7.0 . I am creating an on-screen keyboard for Android TV which will be used as a library. I have a TextInput to whom I have assigned a reference. How can I use this reference to change the value of the TextInput ?

constructor(props) {
  super(props);
  this.emailRef = React.createRef();
}

<TextInput
  ref={this.emailRef}
  placeHolder="Email Address"
  blurOnSubmit={false}
/>

<Keyboard textInput={this.emailRef} />

Inside the library:

<Button
  text="change value"
  onPress={() => {
    this.props.emailRef.current.props.value =
      this.props.emailRef.current.props.value + "q";
  }}
/>

Answer 1

I think what you need is a controlled input. Here is how I would do that:

constructor(props) {
  super(props);
  this.emailRef = React.createRef(); // might not need this
  this.state = {
    value: ''
  }
}

<TextInput
  value={this.state.value}
  onChangeText={(text) => this.setState({text})}
  placeHolder="Email Address"
  blurOnSubmit={false}
/>

<Button
  text="change value"
  onPress={() => {
    // just use `this.state.value` to do whatever you need with it
  }}
/>

Answer 2

You can't change a prop directly within the component - Props can only be derived from a parent component, but cannot be modified, so you can't do:

this.props.emailRef.current.props.value = this.props.emailRef.current.props.value + "q";

Also, you reference this.props.emailRef in your library, whereas the keyboard doesn't have the emailRef prop - it has the textInput prop.

Try this:

constructor(props) {
  super(props);
  this.emailRef = React.createRef();
  this.state = {
    value: "Initial Input"
  };
  this.handleInput = this.handleInput.bind(this);
}

handleInput(input) {
  this.setState({ value: input });
}

render() {
  return (
    ...
      <Keyboard textInput={this.emailRef} onInput={this.handleInput} />
      <TextInput ref={this.emailRef} value={this.state.value} />
    ...
  );
}

Inside the library:

<Button
  text="change value"
  onClick={() => {
    this.props.onInput(this.props.textInput.current.props.value + "q");
  }}
/>

Answer 3

Set text in state method then update state in pressed button

then set in text like this

<Text>
       {this.state.myText}
    </Text>

Answer 4

Use state they all say without knowing why I exactly need to update UI without using state. In my case the text input was using state, and when typed really fast, the asynchronous state and UI update lags behind the speed of typing, and cursor lags couple of letters behind causing in errors in typing. Only way to prevent this is not to use any state! if you do not use state, you cannot give text input an initial value without making it readonly. To give TextInput an initial value, we can use ref and set native props programmatically upon component mount event. like so:

const setInitialBio = React.useCallback(() => {
    if(inputRef.current) {
        inputRef.current.setNativeProps({ text: "initial value goes here" })
    }
}, []);