FlatList blanks out when scrolled quickly (on large dataset)

🐛 Bug Report

Contents of FlatList disappear upon quick scrolling

To Reproduce

When a FlatList is scrolled with a pull to refresh and goes through multiple pages, and then scrolled up quickly, the content disappears. Scroll down FlatList, going through multiple Pull to refresh instances until you have sufficiently large list. Then scroll up quickly, and the content disappears and does not come back. This behavior sometimes happens when you scroll down quickly as well.

Expected Behavior

Content should not disappear when scrolled quickly up or down. This is the purpose of using FlatList over (deprecated) ListView.

Code Example

<FlatList
        style={styles.nudgeScrollView}
        onRefresh={onRefresh}
        refreshing={refreshing || false}
        onScroll={onScroll}
        onEndReached={onEndReached}
        onViewableItemsChanged={onViewableItemsChanged}
        scrollEventThrottle={400}
        data={nudges}
        keyExtractor={item => item.id}
        ListFooterComponent={footer}
        scrollEnabled={scrollEnabled}
        renderItem={({ item }) => (
          <NudgeCard
            nudge={item}
            {...{
              onOpenNudge,
              onArchiveNudge,
              allowListScroll,
              userId,
              archived,
            }}
          />
        )}
      />
    )

Even if onScroll or viewableItemsChanged props are commented out, the issue still remains.

Environment

React Native Environment Info:
    System:
      OS: macOS 10.14
      CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
      Memory: 27.23 MB / 16.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 10.11.0 - /usr/local/bin/node
      Yarn: 1.10.1 - /usr/local/bin/yarn
      npm: 6.4.1 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        API Levels: 23, 25, 26, 27, 28
        Build Tools: 27.0.3, 28.0.2, 28.0.3
        System Images: android-19 | ARM EABI v7a, android-22 | Google APIs Intel x86 Atom, android-27 | Google Play Intel x86 Atom
    IDEs:
      Android Studio: 3.2 AI-181.5540.7.32.5014246
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.6.3 => 16.6.3 
      react-native: 0.58.4 => 0.58.4 
    npmGlobalPackages:
      react-native-git-upgrade: 0.2.7

[alloy]

As noted by @lucsky, the documentation mentions this trade-off and thus it is currently considered to work as intended. What the docs don’t do a great job at is explaining to you how you can fine-tune this behaviour to make the right trade-offs for your situation, something that I’m sure PRs for would be much appreciated.

In an effort to reduce the noise in the issue tracker, I’ll close this issue, but will leave you with a few links that were helpful to me recently:

• https://medium.com/sanjagh/how-to-optimize-your-react-native-flatlist-946490c8c49b
• https://github.com/filipemerker/flatlist-performance-tips

[mkashlev]

@lucsky Thanks for a quick response! This makes sense. One thing I noticed that in some cases, the screen does not get re-rendered, no matter how long I wait. Its a different thing from screen rendering being delayed (at least content shows up later). In my case the content does not show up.