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";
  }}
/>

Is there any reason you're not using state for the values? For example: value={this.state.value} in your TextInput — JRK
– JRK, Commented Jan 16, 2019 at 9:42
@JRK Yes, I am creating an on-screen keyboard for Android TV which will be used as a library. — khateeb
– khateeb, Commented Jan 16, 2019 at 9:44
@markmoxx The keyboard as a whole is imported as a component. The value will be updated inside the onPress of each of the buttons inside the library. The state of the screen can't be updated from there. — khateeb
– khateeb, Commented Jan 16, 2019 at 9:49

nodir.dev · Accepted Answer · 2021-05-25 17:59:29Z

20

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" })
    }
}, []);

answered May 25, 2021 at 17:59

nodir.dev

4924 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nodir.dev Over a year ago

Update on what I did: I am using MentionInput component from react-native-controlled-mentions instead of TextInput

tbuglc · Accepted Answer · 2019-01-16 09:48:53Z

2

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
  }}
/>

answered Jan 16, 2019 at 9:48

tbuglc

3902 silver badges10 bronze badges

Comments

markmoxx · Accepted Answer · 2019-01-16 11:23:04Z

0

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");
  }}
/>

edited Jan 16, 2019 at 11:23

answered Jan 16, 2019 at 9:50

markmoxx

1,5521 gold badge11 silver badges23 bronze badges

1 Comment

FDisk Over a year ago

'value' is a read-only property. Use setNativeProps function

user14191787 · Accepted Answer · 2020-08-30 15:03:54Z

0

Set text in state method then update state in pressed button

then set in text like this

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

answered Aug 30, 2020 at 15:03

user14191787

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related