mine doesn't even trigger.

@parkerproject
My paltform is ios 10.3,mac osx 10.12.5

@fengshanjian
Yep, got the same - fires 2 times. But if you are using redux or even state - you can use something like this

onEndReached={(info)=>{
if (this.state.loading===false){
console.log(JSON.stringify(info));
}
}}

Same issue my side. Seems to be a bug in the ScrollView bouncing feature on iOS (when you over scroll on iOS the ScrollView scrolls past the content and bounces back to the end of the content by default).

Setting bounces={false} solved onEndReached being called twice for me. Still not an ideal solution though as you lose that nice smooth/fluid feel in the UX.

Hey, thanks for reporting this issue!

It looks like your description is missing some necessary information. Can you please add all the details specified in the template? This is necessary for people to be able to understand and reproduce the issue being reported.

I'm definitely seeing the second onEndReached call triggered by the bouncing effect on iOS. Adding bounces={false} to the FlatList fixed it for me. I think ideally, RN should not call onEndReached while the list is in the "bouncing" state. Not sure how doable is this though.

OK, here is my solution for how to avoid the second onEndReached call with the bouncing effect enabled on iOS:

1. Add onMomentumScrollBegin prop to your FlatList declaration.

        <FlatList
          data={this.props.data}
          onEndReached={...}
          onEndReachedThreshold={0.5}
          ...
          onMomentumScrollBegin={() => { this.onEndReachedCalledDuringMomentum = false; }}
        />

2. Modify your onEndReached callback to trigger data fetching only once per momentum.

  onEndReached = () => {
    if (!this.onEndReachedCalledDuringMomentum) {
      this.props.fetchData();
      this.onEndReachedCalledDuringMomentum = true;
    }
  };

Tested with RN 0.44.0.

hi @grin can you pls refer me some document about the function onMomentumScrollBegin? i cannot find any on http://facebook.github.io/react-native/releases/0.46/docs/flatlist.html

@gonglong you can find information about props here https://github.com/facebook/react-native/blob/master/Libraries/Components/ScrollView/ScrollView.js#L246

FlatList is just wrapper of the ScrollView

Hey, thanks for reporting this issue!

It looks like your description is missing some necessary information, or the list of reproduction steps is not complete. Can you please add all the details specified in the template? This is necessary for people to be able to understand and reproduce the issue being reported.

I am going to close this, but feel free to open a new issue with the additional information provided. Thanks!

Was also happening with me, try keeping a flag to stop making request.

if (!this.state.loading) {
    this.setState({loading:true});
    this.setState(state => ({ page: state.page+1}), this.makeNetworkRequest());
}

Then I set the state to loading false after completing of request

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

           />

`

onEndReached is not working as expected. It's not triggering continuously when we reached the end.
FYI: I am using the native-base components.

using setTimeout for setState, eg.
setTimeout(() => this.setState({ arr: [ ...newArr ] }), 3000);

@gougoushan Not working for me

don't use onEndReached
react-native-refresh-list-view

  onScroll = ({nativeEvent}) => {
        let previousOffsetY = 0;
        if (this.nativeEvent) {
            previousOffsetY = this.nativeEvent.contentOffset.y;
        }
        const offsetY = nativeEvent.contentOffset.y;

        /**
         * 判断是否为用户拖拽
         */
        if (this.isResponder) {
            /**
             * 判断为上拉并且滚动到底部
             */
            if ((offsetY - previousOffsetY) > 0 && offsetY >= (nativeEvent.contentSize.height + nativeEvent.contentInset.bottom - nativeEvent.layoutMeasurement
                    .height)) {
                if (this.shouldStartFooterRefreshing()) {
                    this.props.onFooterRefresh && this.props.onFooterRefresh(RefreshState.FooterRefreshing);
                }
            }
        }

        this.nativeEvent = nativeEvent;
    }

@GaoYuJian You are a hero!!

This is my solution:

<FlatList
  ...
  refreshing={this.state.refreshing}
  onRefresh={this._onRefresh}
  onEndReached={this._onEndReached}
  onEndReachedThreshold={0.2}
  onScrollBeginDrag={() => {
    console.log('onScrollBeginDrag');
    this.canAction = true;
  }}
  onScrollEndDrag={() => {
    console.log('onScrollEndDrag');
    this.canAction = false;
  }}
  onMomentumScrollBegin={() => {
    console.log('onMomentumScrollBegin');
    this.canAction = true;
  }}
  onMomentumScrollEnd={() => {
    console.log('onMomentumScrollEnd');
    this.canAction = false;
  }}
/>

_onRefresh = () => {
  console.log('_onRefresh');
  if(!this.canAction) return;
  ...
  };

_onEndReached = () => {
  console.log('_onEndReached');
  if(!this.canAction) return;
  ...
};

For some reasons my onMomentumScrollBegin is not being fired. Is this happening to anybody else?

I have solved it with using debounce from lodash

first import debounce from 'lodash.debounce'

and then just add this to your constructor

this._onEndReached = debounce(this._onEndReached, 500);

Is this going to be fixed in the next release or is the hack necessary?