React-native: 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.

[muhammadwfa]

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}
        />

[muhammadwfa]

@mkashlev did you find any solutions for this issue?

[mkashlev]

@muhammadwfa - still no solution.

[Frekansapp]

I have this issue too and onreachend event calling with delay

[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

[johinsDev]

@muhammadwfa - still no solution.

do you have some solution for this problem?

[muhammadwfa]

Now I am using scrollview, it works well.

[nihp]

Any solution for this in Flatlist

[Rainsho]

Keep watching.

[Rahulkishanm]

getItemLayout has fixed this for me.

[nihp]

@Rahulkishanm Can you give any code and how you have calculate the getItemLayout for entire list?

[nihp]

@Rahulkishanm getItemLayout props not worked for me

```
getItemLayout(data, index) {
return (
{
length: deviceHeight,
offset: (deviceHeight) * index,
index
}
);
}

renderGrid(item) {
return(
resizeMode={FastImage.resizeMode.contain}
source={item.uri}/>


);
}

_handleMoreItems = () => {
let { loadingMoreItems, } = this.state;
let loadedItems = this.props.pagination.loadedItems;

if (!loadingMoreItems && !loadedItems) {

    this.setState(
      (prevState, nextProps) => ({
        loadingMoreItems: true,
        page: prevState.page + 1
      }),
      () => {
        this.props.fetchItemsPerPage(this.state.page);
      }
    );

}

};

_renderFooter = () =>{
return ;
}
shouldItemUpdate(){
return false;
}

render(){
return(
ref={(ref) => { this.flatListRef = ref; }}
data={filteredItems}
renderItem={({ item }) => this.renderGrid(item)}
numColumns={2}
extraData={this.props.pagination}
keyExtractor={item => item.id}
onEndReached={this._handleMoreItems}
onEndReachedThreshold={0.001}
ListFooterComponent={this._renderFooter}
legacyImplementation = {true}
bounces = {false}
maxToRenderPerBatch={4}
getItemLayout={(data, index) => this.getItemLayout(data, index)}
//initialNumToRender = {14}
shouldComponentUpdate= {this.shouldItemUpdate()}
//onScroll={event => {
//this.yOffset = event.nativeEvent.contentOffset.y
///}}
//onScrollEndDrag={() => this.endScreen()}
//scrollEventThrottle={2}
onMomentumScrollEnd={e => this.scroll(e.nativeEvent.contentOffset)}
/>
)
}
```

[Shanie1331]

@nihp Can you please post a full code of your flat list implementation as It can be improved with some props that I can help you with.

[nihp]

@Shanie1331 I have updated my flatlist implementation above. Can you look into this?

I need solution for two issues

1. Flatlist blanks out when scrolling
2. Scrolling is not smooth in Flatlist

[nihp]

Shanie1331 Any update

[Shanie1331]

Can you wait for a while as I need to replicate your implementation?

[nihp]

Okay.

Thanks

[tootsweet]

Hello,

We are experiencing this bug as well with RN61.

[vishnusurabhirao]

Me tooo

[SelvaraniAlagumuthu]

Hi,
I am also faced while scrolling the list i got blank pages. After adding scrollview in flatlist now its working fine. Here my code please check may be its helpful.

data={data }
renderItem={({ item }) => }
keyExtractor={item => item.id}
/>


Thanks

[nihp]

@SelvaraniAlagumuthu Can you give your render Item method in brief

[androidsdkproject]

Hi,
I am also faced while scrolling the list i got blank pages. After adding scrollview in flatlist now its working fine. Here my code please check may be its helpful.

data={data }
renderItem={({ item }) => }
keyExtractor={item => item.id}
/>

Thanks

Can you share your code of renderItem , i am facing same issue.

[nihp]

Here I don't want to add scroll view for the screen. Any solution other
than this

On Fri, Jan 3, 2020 at 3:21 PM kamal verma [e-mail] wrote:

Hi,
I am also faced while scrolling the list i got blank pages. After adding
scrollview in flatlist now its working fine. Here my code please check may
be its helpful.

data={data }
renderItem={({ item }) => }
keyExtractor={item => item.id}
/>

Thanks

Can you share your code of renderItem , i am facing same issue.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/23442?email_source=notifications&email_token=AI2HKUWMMLO3LTLBXMW4WR3Q34DBVA5CNFSM4GXJN6FKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEIAXTXI#issuecomment-570522077,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AI2HKUUOVVY2BMFVQ4DHBT3Q34DBVANCNFSM4GXJN6FA
.

[androidsdkproject]

Thanks for replying.

Thanks and Regards
Kamal Verma
[phone]

On Mon, 6 Jan 2020 at 15:23, vishnu [e-mail] wrote:

showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
itemDimension={INV_GRID_CELL_WIDTH}
spacing={INV_GRID_SPACING}
items={items}
style={{ flex: 1 }}
itemContainerStyle={{ alignItems: "center", marginTop: INV_GRID_SPACING}}
renderItem={item => (

{method}
{method}

{method}

{method}
{method}
{method}

)}
/>

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/23442?email_source=notifications&email_token=AELAK2XGZLVDA3HGB3AQXJDQ4L5QLA5CNFSM4GXJN6FKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEIE6YIQ#issuecomment-571075618,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AELAK2VDDUGJ7YBTFDYMMYLQ4L5QLANCNFSM4GXJN6FA
.

[NikGanyponko]

I have this issue too and onreachend event calling with delay

Yeah! Thank you, I had a problem => in some cases flatList's callback onEndReached didn't call by scrolling to the end. So, I've added setTimeout on endReached and it works perfect.