React native onEndReached always fire when 1st row is rendered

Question

I am using Firebase child_added to list out data. Every time first row is rendered, onEndReached is fired. Any wrong with my code?

Component

onEndedReached() {
 lastkey = Object.keys(this.props.contacts).pop();
 // this.props.nextPage(this.props.auth.uid, lastKey);
 console.log('Fire onEndedReached:', lastkey);
}

render() {
 return (
  <ListView
    style={styles.container}
    enableEmptySections
    dataSource={this.dataSource}
    renderRow={this.renderRow}
    onEndReachedThreshold={50}
    onEndReached={() => this.onEndedReached()}
  />
 )
 }
}

Action

export const getContacts = (uid) => {
  return (dispatch) => {
    firebase.database().ref(`userContacts/${uid}`)
      .limitToFirst(20).on('child_added', (contact) => {
      dispatch({
        type: GET_CONTACTS_SUCCESS,
        payload: { [contact.key]: contact.val() }
      })
    })
  }
}

Reducer

const INITIAL_STATE = {};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case GET_CONTACTS_SUCCESS:
      return Object.assign({}, state, action.payload );
    default:
      return state;
  }
}

Answer 1

just add safeguards on your onEndReached function when you dont want it to fire.

for example. when you are refreshing the listview or while it is getting data or the length of your current data does not meet your requirements to trigger endReached. put all of this in state too.

if( this.state.isEndCountZero || this.state.skip < 15 || this.state.onEndReached || this.state.refreshing || this.state.isLoading) { return; }

Answer 2

Pay attention for onEndReachedThreshold parameter.

How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback. Thus a value of 0.5 will trigger onEndReached when the end of the content is within half the visible length of the list.

Maybe you should set it a less number.