question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

TextInput is rerendered with artifacts (flickering)

See original GitHub issue

When I start typing on a keyboard into TextInput component, text is rerendered incorrectly, with flickering and shaking.

React Native version: 0.60.5 React Native Info: System: OS: Linux 4.15 Ubuntu 18.04.3 LTS (Bionic Beaver) CPU: (8) x64 Intel® Core™ i7-4770K CPU @ 3.50GHz Memory: 7.17 GB / 15.60 GB Shell: 4.4.20 - /bin/bash Binaries: Node: 12.6.0 - ~/.local/opt/node-v12.6.0-linux-x64/bin/node Yarn: 1.12.3 - /usr/bin/yarn npm: 6.10.3 - ~/.local/opt/node-v12.6.0-linux-x64/bin/npm Watchman: 4.9.0 - /home/likern/.local/bin/watchman SDKs: Android SDK: API Levels: 23, 25, 26, 27, 28 Build Tools: 28.0.3 System Images: android-27 | Google APIs Intel x86 Atom, android-28 | Intel x86 Atom_64 npmPackages: react: 16.8.6 => 16.8.6 react-native: 0.60.5 => 0.60.5 npmGlobalPackages: react-native-cli: 2.0.1

Phone version: Model: Xiaomi Redmi 5A Android version: 8.1.0 MIUI version: Global 10.3.2

Steps To Reproduce

  1. Create simple TextInput component
  2. Create wrapper for TextInput with state
  3. Start typing into TextInput component inside application

Describe what you expected to happen: Clean text rendering and re-rendering without flickering and shaking.

Source code: This simplest component is able to reproduce bug:

const ScrollInput = props => {
  const [text, setText] = useState('default text');
  const onChangeText = text => setText(text);
  return <TextInput value={text} onChangeText={onChangeText} />;
};

Reproducebug

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:6

github_iconTop GitHub Comments

3reactions
Wiltzucommented, Aug 28, 2019

I have the same issue with iOS also, but it’s not as bad as with Android. TextInput is almost unusable at the moment.

0reactions
stale[bot]commented, Dec 5, 2019

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

Read more comments on GitHub >

github_iconTop Results From Across the Web

TextInput flickering/choppy behaviour on render - Stack Overflow
The value to show for the text input. TextInput is a controlled component, >which means the native value will be forced to match...
Read more >
React Native: Fix For Flickering Field Formatting
Applying dynamic formatting to a TextField input in React Native can trigger ugly flickering - here's how you can fix it.
Read more >
Is there any mechanism to implement input filter in RN, where I ...
This would not force a rerender (flicker) since it only rerenders on valid inputs.
Read more >
World-Consistent Video-to-Video Synthesis - NVlabs
To produce videos in- stead of images, simply doing it frame-by-frame will usually result in severe flickering artifacts [80]. To resolve this, vid2vid...
Read more >
Virtual Shadow Maps - Unreal Engine Documentation
These artifacts will manifest as noisy light leaks in shadowed areas. ... expensive static geometry to be re-rendered, just to update the dynamic...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found