FlatList blanks out when scrolled quickly (on large dataset)

[mkashlev]

🐛 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

[react-native-bot]

It looks like you are using an older version of React Native. Please update to the latest release, v0.58 and verify if the issue still exists.

The "Resolution: Old Version" label will be removed automatically once you edit your original post with the results of running react-native info on a project using the latest release.

[mkashlev]

react native upgraded, but issue persists @react-native-bot

[lucsky]

@mkashlev From the FlatList documentation:

In order to constrain memory and enable smooth scrolling, content is rendered asynchronously offscreen. This means it's possible to scroll faster than the fill rate and momentarily see blank content. This is a tradeoff that can be adjusted to suit the needs of each application, and we are working on improving it behind the scenes.

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

[mkashlev]

Was wondering if anyone has experienced this area, or if I'm not doing it correctly? @sahrens

[akshetpandey]

@mkashlev : I have definitely faced the issue where the component never updates. Make sure your keyExtractor function is correct. Removing removeClippedSubviews and getItemLayout has fixed this for me but causes performance problems. Looks like there may be subtle bug in the flatlist implementation.

I have the same issue, even for 100 items this happens to my flatlist

<FlatList
          ref={(ref) => (this.flatListRef = ref)}
          extraData={this.props.extraData}
          keyExtractor={this.keyExtractor}
          enableEmptySections
          automaticallyAdjustContentInsets={false}
          inverted={this.props.inverted}
          data={this.props.messages}
          style={styles.listStyle}
          renderItem={this.renderRow}
          onScroll={this.handleOnScroll}
          scrollEventThrottle={100}
        />

@mkashlev did you find any solutions for this issue?

[mkashlev]

@muhammadwfa - still no solution.

[erennyuksell]

I have this issue too and onreachend event calling with delay