javascript - React Native Textinput Flickers when using Redux - Stack Overflow

admin管理员组

文章数量:1339477

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?

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?

• javascript
• reactjs
• react-native
• redux
• textinput

Share Improve this question Follow edited Jun 17, 2020 at 12:19 M. Alex asked Jun 15, 2020 at 16:16 M. AlexM. Alex 73311 gold badge99 silver badges3333 bronze badges 2

• 1 can you add expo snack? and anyhow you should shallow copy redux store before modifying var steps = [...this.props.steps] – Hagai Harari Commented Jun 17, 2020 at 12:27
• I had a problem where my TextInput that was nested was giving me this flickering/blinking, although the same ponent that was not nested was fine. What fixed it for me was just setting a fixed width to the TextInput. – user Commented Jul 28, 2024 at 3:17

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 12

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 ponent. 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 ponent 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.

I had the same issue, the cause was not setting the width of the text input ponent. Setting it to "100%" worked so well for me. Using another value will also work.

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 mented, 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.

I tried all the solutions given above, but they didn't work for me. Just wrap your text input into a view and give flex: 1 to the view. It will work 100%.

本文标签： javascriptReact Native Textinput Flickers when using ReduxStack Overflow