FlatList blanks out when scrolled quickly (on large dataset) #23442

mkashlev · 2019-02-13T21:57:41Z

🐛 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

The text was updated successfully, but these errors were encountered:

mkashlev · 2019-02-13T23:09:57Z

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

lucsky · 2019-02-13T23:31:19Z

@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 · 2019-02-13T23:35:00Z

@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 · 2019-02-18T20:37:01Z

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

akshetpandey · 2019-02-25T21:16:46Z

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

ghost · 2019-03-04T11:35:24Z

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

ghost · 2019-03-04T11:36:39Z

@mkashlev did you find any solutions for this issue?

mkashlev · 2019-03-04T23:27:44Z

@muhammadwfa - still no solution.

erennyuksell · 2019-03-06T11:33:56Z

I have this issue too and onreachend event calling with delay

alloy · 2019-03-19T17:36:40Z

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:

johinsDev · 2019-07-26T23:30:07Z

@muhammadwfa - still no solution.

do you have some solution for this problem?

ghost · 2019-07-27T19:58:49Z

Now I am using scrollview, it works well.

nihp · 2019-10-28T09:00:28Z

Any solution for this in Flatlist

Rainsho · 2019-11-05T02:14:18Z

Keep watching.

Rahulkishanm · 2019-11-13T05:44:54Z

getItemLayout has fixed this for me.

nihp · 2019-11-13T05:51:00Z

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

nihp · 2019-11-13T07:10:32Z

@Rahulkishanm getItemLayout props not worked for me

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

 renderGrid(item) {
   return(
     <TouchableOpacity activeOpacity = { .5 } >
       <View style={{backgroundColor: 'white', alignItems: 'center'}}>
         <FastImage style={{width: deviceWidth, height: deviceHeight, margin:6}}
           resizeMode={FastImage.resizeMode.contain}
           source={item.uri}/>
       </View>
     </TouchableOpacity>
   );
 }

_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 <ActivityIndicator color="#000000" style = {{marginBottom:10, marginTop:10}}/>;
}
 shouldItemUpdate(){
   return false;
 }

render(){
 return(
<View style = {{flex:1}}> 
 <FlatList
             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 · 2019-11-13T07:25:54Z

@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 · 2019-11-13T07:35:28Z

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

I need solution for two issues

Flatlist blanks out when scrolling
Scrolling is not smooth in Flatlist

nihp · 2019-11-13T11:35:39Z

Shanie1331 Any update

Shanie1331 · 2019-11-13T11:55:32Z

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

nihp · 2019-11-13T12:04:02Z

Okay.

Thanks

tootsweet · 2019-11-20T16:10:51Z

Hello,

We are experiencing this bug as well with RN61.

vishnusurabhirao · 2019-11-21T07:12:37Z

Me tooo

SelvaraniAlagumuthu · 2019-12-12T07:36:00Z

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.

<View style={{ flex: 1}}>
<FlatList
data={data }
renderItem={({ item }) => <this.Item item={item} />}
keyExtractor={item => item.id}
/>

Thanks

nihp · 2019-12-13T04:25:01Z

@SelvaraniAlagumuthu Can you give your render Item method in brief

androidsdkproject · 2020-01-03T09:51:18Z

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.

<View style={{ flex: 1}}>
<FlatList
data={data }
renderItem={({ item }) => <this.Item item={item} />}
keyExtractor={item => item.id}
/>

Thanks

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

nihp · 2020-01-06T09:37:03Z

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 ***@***.***> 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. <View style={{ flex: 1}}> <FlatList data={data } renderItem={({ item }) => <this.Item item={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 <#23442?email_source=notifications&email_token=AI2HKUWMMLO3LTLBXMW4WR3Q34DBVA5CNFSM4GXJN6FKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEIAXTXI#issuecomment-570522077>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AI2HKUUOVVY2BMFVQ4DHBT3Q34DBVANCNFSM4GXJN6FA> .

androidsdkproject · 2020-01-07T06:24:34Z

Thanks for replying. *Thanks and Regards* *Kamal Verma* *+91-9509371638*

…

On Mon, 6 Jan 2020 at 15:23, vishnu ***@***.***> wrote: <GridView 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 => ( <View style={{ width: '100%' }}> <TouchableOpacity style={{ width: '100%' }} onPress={}> {method} {method} {method} {method} {method} {method} )} /> — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#23442?email_source=notifications&email_token=AELAK2XGZLVDA3HGB3AQXJDQ4L5QLA5CNFSM4GXJN6FKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEIE6YIQ#issuecomment-571075618>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AELAK2VDDUGJ7YBTFDYMMYLQ4L5QLANCNFSM4GXJN6FA> .

NikGanyponko · 2020-02-26T10:22:05Z

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.

mkashlev added the Type: Bug Report label Feb 13, 2019

react-native-bot added Component: FlatList Resolution: Old Version labels Feb 13, 2019

This comment has been minimized.

Sign in to view

hramos removed the Resolution: Old Version label Feb 13, 2019

cpojer mentioned this issue Mar 19, 2019

RN Issue Triage Group 3 #24030

Closed

alloy closed this as completed Mar 19, 2019

react-native-bot added the Bug label May 4, 2019

facebook locked as resolved and limited conversation to collaborators Mar 19, 2020

react-native-bot added the Resolution: Locked This issue was locked by the bot. label Mar 19, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FlatList blanks out when scrolled quickly (on large dataset) #23442

FlatList blanks out when scrolled quickly (on large dataset) #23442

mkashlev commented Feb 13, 2019 •

edited

Loading

This comment has been minimized.

mkashlev commented Feb 13, 2019

lucsky commented Feb 13, 2019

mkashlev commented Feb 13, 2019

mkashlev commented Feb 18, 2019

akshetpandey commented Feb 25, 2019

ghost commented Mar 4, 2019

ghost commented Mar 4, 2019

mkashlev commented Mar 4, 2019

erennyuksell commented Mar 6, 2019

alloy commented Mar 19, 2019

johinsDev commented Jul 26, 2019

ghost commented Jul 27, 2019

nihp commented Oct 28, 2019

Rainsho commented Nov 5, 2019

Rahulkishanm commented Nov 13, 2019

nihp commented Nov 13, 2019 •

edited

Loading

nihp commented Nov 13, 2019 •

edited

Loading

Shanie1331 commented Nov 13, 2019

nihp commented Nov 13, 2019 •

edited

Loading

nihp commented Nov 13, 2019

Shanie1331 commented Nov 13, 2019

nihp commented Nov 13, 2019

tootsweet commented Nov 20, 2019

vishnusurabhirao commented Nov 21, 2019

SelvaraniAlagumuthu commented Dec 12, 2019

nihp commented Dec 13, 2019

androidsdkproject commented Jan 3, 2020

nihp commented Jan 6, 2020 via email

androidsdkproject commented Jan 7, 2020 via email

NikGanyponko commented Feb 26, 2020

FlatList blanks out when scrolled quickly (on large dataset) #23442

FlatList blanks out when scrolled quickly (on large dataset) #23442

Comments

mkashlev commented Feb 13, 2019 • edited Loading

🐛 Bug Report

To Reproduce

Expected Behavior

Code Example

Environment

This comment has been minimized.

mkashlev commented Feb 13, 2019

lucsky commented Feb 13, 2019

mkashlev commented Feb 13, 2019

mkashlev commented Feb 18, 2019

akshetpandey commented Feb 25, 2019

ghost commented Mar 4, 2019

ghost commented Mar 4, 2019

mkashlev commented Mar 4, 2019

erennyuksell commented Mar 6, 2019

alloy commented Mar 19, 2019

johinsDev commented Jul 26, 2019

ghost commented Jul 27, 2019

nihp commented Oct 28, 2019

Rainsho commented Nov 5, 2019

Rahulkishanm commented Nov 13, 2019

nihp commented Nov 13, 2019 • edited Loading

nihp commented Nov 13, 2019 • edited Loading

Shanie1331 commented Nov 13, 2019

nihp commented Nov 13, 2019 • edited Loading

nihp commented Nov 13, 2019

Shanie1331 commented Nov 13, 2019

nihp commented Nov 13, 2019

tootsweet commented Nov 20, 2019

vishnusurabhirao commented Nov 21, 2019

SelvaraniAlagumuthu commented Dec 12, 2019

nihp commented Dec 13, 2019

androidsdkproject commented Jan 3, 2020

nihp commented Jan 6, 2020 via email

androidsdkproject commented Jan 7, 2020 via email

NikGanyponko commented Feb 26, 2020

mkashlev commented Feb 13, 2019 •

edited

Loading

nihp commented Nov 13, 2019 •

edited

Loading

nihp commented Nov 13, 2019 •

edited

Loading

nihp commented Nov 13, 2019 •

edited

Loading