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.

FlatList - Extreme scrolling breaks touches with focused TextInput

See original GitHub issue

Description

With a FlatList that has a fairly large number of items, sometimes you can scroll far/fast enough to permanently break something around TextInputs and touches. After “extreme” scrolling inside the FlatList, and after something is typed into a TextInput, the first touch outside the TextInput is swallowed. The second touch works as normal. It’s hard to describe so I made a test project to reproduce and recorded a video to show every step and the resulting error.

The video is recorded using the iOS simulator, but the bug occurs on every iOS system we’ve tried so far, regardless of hardware or OS version. We have yet to reproduce it on Android.

We’re not sure of the relevance of scroll speed, Y position, or number of items. Our live application has much fewer items than the test application in the video, but it’s still easy to reproduce there. Probably because those items are more taxing on the hardware (images, different opacity etc). But that’s all conjecture.

Either way this happens organically in our application and is preventing us from releasing our move away from ListView to production, which is a shame because overall the performance improvements with FlatList have been fantastic.

Reproduction

This repository contains the test application from the video above. scrolltest.js has all the relevant code.

Clone the repository, npm install, react-native run-ios, quickly scroll through the list, type something in the text input and try the “Clear” button. I highly recommend watching the video so you’ll know what I’m talking about.