FlatList onEndReached Called On Load [iOS] (with detailed findings)

[zachrnolan]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
OS: macOS Sierra 10.12.6
Node: 6.10.3
Yarn: 1.0.2
npm: 3.10.10
Watchman: 4.7.0
Xcode: Xcode 8.3.3 Build version 8E3004b
Android Studio: Not Found

Packages: (wanted => installed)
react: 16.0.0-alpha.12 => 16.0.0-alpha.12
react-native: 0.48.3 => 0.48.3

Steps to Reproduce

1. Create minimal app with a FlatList component that loads 20 items (with a height that is roughly double the height of the screen size)
2. Add onEndReached prop with a handler function that adds more data to the FlatList
3. Add onEndReachedThreshold prop with a value of 0.5
4. Load the app with the iOS simulator or an actual device

<FlatList
  data={this.state.data}
  keyExtractor={(item, index) => index}
  renderItem={this._renderItem}
  onEndReached={this.onEndReached}
  onEndReachedThreshold={0.5} />

Expected Behavior

onEndReached should not be called until the user scrolls down on the vertical FlatList.

Actual Behavior

onEndReached is called as the FlatList is loaded without any interaction from the end user. There seems to be some kind of race condition, as it only happens 50% of the time I load the screen. It is definitely reproducible with a couple refreshes.

Reproducible Demo

Preferred way to reproduce is to download my minimal repo from https://github.com/zachrnolan/react-native-flatlist-vertical and yarn install && react-native run-ios

I also created a snack here: https://snack.expo.io/HkkO0RGob. Although it seems to be a little buggy with displaying the console logs.

Detailed Findings

Since starting with React Native about a year and a half ago, I've always dealt with some inconsistencies or bugs with lists and infinite scroll / paging. I've outlined my findings with FlatList to hopefully allow other people to better understand the landscape. This could be too much detail for this particular bug report, but I think it's helpful.

Platform	Number of Items	onEndReachedThreshold
iOS	5 (roughly half the screen height)	0

Results:
onEndReached is called twice on load of the FlatList

Notes:
I'm guessing that onEndReached is called after the load of FlatList since the bottom of the FlatList is in view. It seems like the user should have to interact with the FlatList before onEndReached is called. Either way, shouldn't be called twice.

---

Platform	Number of Items	onEndReachedThreshold
iOS	10 (roughly the same height as the screen)	0

Results:
onEndReached is called once on load of the FlatList

Notes:

• onEndReached should not be called on load
• I'm able to load more pages as I scroll down, however, it will call onEndReached multiple times if I scroll really fast. I believe this is due to the momentum issue outlined here: [FlatList] onEndReached triggered 2 times #14015 (comment)

---

Platform	Number of Items	onEndReachedThreshold
iOS	10 (roughly the same height as the screen)	0.5 OR 1

Results:
Same as above

---

Platform	Number of Items	onEndReachedThreshold
iOS	10 (roughly the same height as the screen)	> 1

Results:
onEndReached is called multiple times on load of FlatList (typically around 10 times)

Notes:

• I've read around on different issues that it's best to use a number between 0 and 1. Just wanted to document how it behaves when the threshold is greater than 1

---

Platform	Number of Items	onEndReachedThreshold
iOS	20 (roughly double the height of the screen)	0

Results:

• Works as expected!
• Still have the momentum issue.

Notes:
This would be my preferred settings, however, the app I have in production is for both iOS and Android. These settings have another issue on Android (see below). I could check for Platform, so that may work.

---

Platform	Number of Items	onEndReachedThreshold
iOS	20 (roughly double the height of the screen)	0.5

Results:

• Works as expected!
• Still have the momentum issue.
• 50% of the time, onEndReached is called once on load of the FlatList (not good)

---

Platform	Number of Items	onEndReachedThreshold
Android	5 (roughly half the screen height)	0

Results:

• onEndReached is called once on load of the FlatList
• onEndReached is not called again when scrolling

---

Platform	Number of Items	onEndReachedThreshold
Android	10 (roughly the same height as the screen)	0

Results:
Android works as expected the first time you load more. However, it will not load a second time after you scroll to the bottom with the new data loaded. onEndReached function is not called.

---

Platform	Number of Items	onEndReachedThreshold
Android	10 (roughly the same height as the screen)	0.5 OR 1

Results:

• onEndReached is called once on load of the FlatList (should not be called until scrolling to the bottom of the list)
• Once you scroll down and onEndReached is called twice (should only be called once)

---

Platform	Number of Items	onEndReachedThreshold
Android	10 (roughly the same height as the screen)	> 1

Results:
onEndReached is called multiple times on load of FlatList (typically around 5 times)

Notes:

• I've read around on different issues that it's best to use a number between 0 and 1. Just wanted to document how it behaves when the threshold is greater than 1

---

Platform	Number of Items	onEndReachedThreshold
Android	20 (roughly double the height of the screen)	0

Results:

• onEndReached isn’t called on load (good)
• onEndReached isn’t called when I scroll to the bottom of the list (bad)

---

Platform	Number of Items	onEndReachedThreshold
Android	20 (roughly double the height of the screen)	0.5

Results:

• Works as expected!

[richardgirges]

Seeing the same behavior on iOS / React Native 0.48.4

[zachrnolan]

This is also an issue with horizontal FlatLists.

[allmaxgit]

How make not fire onEndReached on load on iOS?
My application entering in infinite loop because of this.

[hoorsa]

hi (sorry for my English)
my solution:

1. declare a variable: loadFlag: false,
2. after first data fetch set loadFlag: true, (for next fetch)
3. before fetching new data onEndReached check loadFlag, if true then set loadFlag: false and call onEndReached function else don't call onEndReached function (fetch is loading).
4. after fetch new data from onEndReached function set loadFlag: true. (for next onEndReached)

[skyout]

I found this same issue - try putting onEndReached function call in an anonymous function.

<FlatList
  data={this.state.data}
  keyExtractor={(item, index) => index}
  renderItem={this._renderItem}
  onEndReached={() => this.onEndReached()}
  onEndReachedThreshold={0.5} />

[mahyarr]

Having the same issue. Im using a boolean flag to circumvent loading the data twice but it's obviously not a very elegant solution.

[janziemba]

Another possible workaround #14015 (comment)

[Naoto-Ida]

I have not found a workaround that works...
but so far, if I remove this line, it stops doing the initial onEndReached, but still fires when I actually reach the end.

Since I'm not a contributor, I'm not sure what the implications of removing this is.

[ghost]

Has anyone found a better solution? It's very frustrating to work with FlatList like this.

[AndreyMalykhin]

+1

[AyubaMakoa]

`constructor(props){
super(props);
this.state = {
flatListReady:false
}
}

_scrolled(){
this.setState({flatListReady:true})
}

loadMore = () => {
if(!this.state.flatListReady){ return null}

//you can now load more data here from your backend

}
<FlatList
onScroll={this._scrolled.bind(this)}
style={{width:'100%',flexGrow:1}}
ListHeaderComponent={this.headerComponent}
data={this.props.data}
renderItem={this.renderItem}
keyExtractor={(item,index) => index }
onEndReached={(x) => {this.loadMore()}}
onEndReachedThreshold={0.5}

       />

`

[ToniChaz]

same problem here

react: ^16.0.0
react-native: 0.50.3

handleLoadMore() {
   if(!this.props.refreshing){
   console.log('handleLoadMore')
   this.props.fetchProducts('down')
   }
}

<FlatList
	numColumns={2}
	data={this.props.products}
	renderItem={({item}) => <Product product={item}/>}
	keyExtractor={(item, index) => index}
	ListFooterComponent={this.renderFooter.bind(this)}
	onRefresh={this.handleRefresh.bind(this)}
	refreshing={this.props.refreshing}
	onEndReached={this.handleLoadMore.bind(this)}
	onEndReachedThreshold={0.5}
/>

[christophby]

+1

[irodeanu]

+1

[anil1712]

Guys any update on the same? I am still facing the issue

[superandrew213]

I've tried all workarounds and none of them work 100% for me. This is the closest #14015 (comment) but still has some issue. It doesn't trigger when you scroll to end a second time.

Debouncing onEndReached like this using lodash's debounce or another debounce function works quite well.

constructor(props) {
    super(props);
    this._onEndReached = _.debounce(this._onEndReached, 500);
  }

It stops multiple triggers onLoad (when list is shorter than screen height) and onEndReached.

[react-native-bot]

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

_{How to Contribute • What to Expect from Maintainers}

[Shu-Ji]

This is reproduced in the latest version 0.53.0.
And it can't be pulled refresh if data is empty.

[timwangdev]

I just reopened this issue, because this bug still occurs in latest version of react-native.

[anil1712]

@timwangdev so did you get any solution for the same?

[guoliang1206]

Still has onEndReached bug, can not works well as the document said.

[stageover]

`constructor(props){
super(props);
this.state = {
flatListReady:false
}
}

_scrolled(){
this.setState({flatListReady:true})
}

loadMore = () => {
if(!this.state.flatListReady){ return null}

//you can now load more data here from your backend

}
<FlatList
onScroll={this._scrolled.bind(this)}
style={{width:'100%',flexGrow:1}}
ListHeaderComponent={this.headerComponent}
data={this.props.data}
renderItem={this.renderItem}
keyExtractor={(item,index) => index }
onEndReached={(x) => {this.loadMore()}}
onEndReachedThreshold={0.5}

       />

`

this works for me

[dellwatson]

the bug is still exist anyway, using Expo 34 --> RN 0.59.8

Edit: using FlatList from gesture-handler seems better

[ifsnow]

https://github.com/ifsnow/react-native-infinite-flatlist-patch

I made a patch library to help with this issue. I hope this helps.

[Samide47]

the problem still exists in latest version of RN

[sahrens]

Sorry for the bug and the radio silence here.

I finally dug into this and I believe the issue is indeed a race between onLayout and onContentSizeChange, which in general should be fine because there is no expectation of ordering between the two, and only causes issues with certain configurations.

The bug can be triggered if initialNumToRender is smaller than needed to fill past the onEndReachedThreshold (say the default, 10, is only 580px tall, but it takes 15 to reach the threshold). This will cause an incrementally render of more items to try and fill the viewport. The problem is that if the onLayout comes back before the first onContentSizeChange, it will first do the state increment to render 20 items and then the stale onContentSizeChange callback from 10 items will fire and we'll think that the content size for 20 items is 580px when in fact it's 1160px (which is past the threshold). If those 20 items are also all of our available data, then we'll call onEndReached because we think we've rendered everything and are still within the onEndReachedThreshold.

The fundamental problem here is the system getting confused when a stale async onContentSizeChange comes in after increasing state.last. I wish there was a concrete timeframe, but Fabric will give us more flexibility to do things synchronously so hopefully we can avoid class of issues once that roles out.

There are a few workarounds you can try while you wait for a proper fix to be released:

1. Provide the getItemLayout prop so the list doesn't have to rely on async layout data (you should do this whenever possible anyway for better perf). e.g. for the original snack example, you can just add getItemLayout={(d, index) => ({length: 58, offset: 58 * index, index})} since all the rows are height 58 and the issue will no longer repro. Note this is fragile and must be kept in sync with UI changes, a11y font scaling, etc - a more robust approach could be to render a single representative row offscreen and measure it with onLayout then use that value.
2. If getItemLayout is not feasible to compute for your UI, increase initialNumToRender to cover the onEndReachedThreshold.
3. And/or add your own logic to protect against extra calls to onEndReached as others have suggested.

[sahrens]

This should be fixed in 8ddf231, but it's still possible there are some related issues. Our plan is still to wait for fabric before doing a major overhaul / re-write of lists.

[yasir-netlinks]

Hi guys, I am having the same problem too, but I have noticed this happening. On initial load when the array of data is of length 0 (no data), the onEndReached doesn't trigger. But on subsequent navigation to this screen and the array is already populated with some data, I see that it triggers onEndReached (with no scroll, on load)
The array is kept cuz I didn't want clear the array in reducer upon FETCH_DATA action, cuz if there is some data previously fetched already, should be shown instead of the loader.

[dpossamai]

For those of you that use native-base, enclosing FlatList between causes this issue.

Replacing the with solved the issue in my case

This saves my day! Thanks!

[Stevemoretz]

It's not fixed yet and it's a horrible bug, I tried the solutions like flag and stuff but on different items for flatlist I got different results so the whole thing is useless

[jbromberg]

Still having this bug.

[Stevemoretz]

I literally deleted this feature from my app and added some item add the footer saying load more items...clicking that would load more items.Well it's terrible but at least I know it always works. Unlike the onEndReached which does wathever it wants whenever it wants and doesn't do anything it doesn't want to do.

[seyaobey]

Still having the bug, it has been literally 3 years!!

[KasTasElis]

• the bug is still there....

[Stevemoretz]

Fixed it, that function returns an object it has distanceProp or something like this in it, just put a if statement to check if that is bigger than 0.

It gets fixed :)

[KasTasElis]

Fixed it, that function returns an object it has distanceProp or something like this in it, just put a if statement to check if that is bigger than 0.

It gets fixed :)

I am not so sure you are right, i am console logging the distanceFromBottom val you are talking about when the callback triggers. First of all it is not consistent (ranging -10 to -150ish), secondly its never 0 always under at least for my case.

[Stevemoretz]

add these props to FlatList:

                      onEndReachedThreshold={0.5}
                      onEndReached: (d) => {
                          if (d.distanceFromEnd > 0) {
                               console.log("onEndReached");
                          }
                      },

Let me know if this fixes your issue.

[KasTasElis]

add these props to FlatList:

                      onEndReachedThreshold={0.5}
                      onEndReached: (d) => {
                          if (d.distanceFromEnd > 0) {
                               console.log("onEndReached");
                          }
                      },

Let me know if this fixes your issue.

This seems to work fine to prevent the initial load issue, however after the first load more the infinite loop issue still exists.

[Stevemoretz]

What's the infinite loop issue?

[1061750360]

add these props to FlatList:

                      onEndReachedThreshold={0.5}
                      onEndReached: (d) => {
                          if (d.distanceFromEnd > 0) {
                               console.log("onEndReached");
                          }
                      },

Let me know if this fixes your issue.

This seems to work fine to prevent the initial load issue, however after the first load more the infinite loop issue still exists.

thank you，it is useful for me.And I think it will help others too!

[Martinnord]

@Stevemoretz's solution worked great for me. Thank you.

[fabOnReact]

https://github.com/ifsnow/react-native-infinite-flatlist-patch/tree/master/patches does not support rn versions > 0.68.
Do you still experience this issue? Should I work on this? Thanks

ifsnow/react-native-infinite-flatlist-patch#11