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.