React Native Textinput Flickers when using Redux

Question

In my react native app, contains multiple TextInputs for a form which are rendered like this:

{this.props.steps.map(step, index) => (
  <TextInput
    multiline={true}
    value={this.props.steps[index]}
    placeholder="Enter Step"
    onChangeText={value => this.handleFieldChange(value, index)}
    style={{ padding: 10, fontSize: 15 }}
  />
)}

In the onChangeText function, the value of the textinput is edited using redux and the form is validated as so:

handleFieldChange = async (value, index) => {
  var steps = this.props.steps;
  steps[index]= value;
  store.dispatch(updateSteps({ steps: steps }));
  this.validateForm();
};

This means the TextInput's value doesn't get updated immediately so when the user types relatively fast, the it flickers.

Can someone suggest how to make the Text Input get updated more smoothly?

Answer 1

After testing for a while, I realised that it was nothing to do with the onChangeText function. I found that the TextInput only flickered after its contents exceeded the initial width of the component. Therefore making the TextInput the full width of the screen and adding textAlign to center the input solved the issue.

var width = Dimensions.get("window").width

<TextInput
  multiline={true}
  value={this.props.steps[index]}
  placeholder="Enter Step"
  onChangeText={value => this.handleFieldChange(value, index)}
  style={{ width: width, padding: 10, fontSize: 15, textAlign: "center" }}
/>

This issue didn't occur if the TextInput was the only component in the screen, but only when it was nested in several Views as was the case here. However, I have no idea what is the direct cause of this error.

Answer 2

In the rendering step could be used (irrelevant, I know) and a key would be used, I would change this

value={this.props.steps[index]}

in

value={step}
key={index}

As already commented, in handleFieldChange you are changing props in a bad way, this:

var steps = this.props.steps;

needs to be changed in:

var steps = [...this.props.steps];

More than this I see no evidence why handleFieldChange needs to be an async function, I would remove async from its declaration.

Last, the root source of the problem could be in updateSteps or in validateForm...

Hope this helps.