React Native ListView Component auto run onEndReached function although my scroll still on the top
<p>I use the React Native ListView Component, But I don't know why it auto run the onEndReached function although the scroll still on the top.</p>

<p>What I hope is when the scroll goto the bottom of my device, then run the onEndReached function. But in following code, when I goto the page, it will run the onEndReached function continuously.</p>

<p>following is my Component</p>

<pre><code>class MovieList extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      movies: [],
      loaded: false,
      count: 10,
      start: 0,
      total: 0
    };

    this.dataSource = new ListView.DataSource({
      rowHasChanged: (row1, row2) =&gt; row1 !== row2
    });

    this.REQUEST_URL = 'https://api.douban.com/v2/movie/top250';

    this.fetchData();

  }

  requestURL(
    url = this.REQUEST_URL,
    count = this.state.count,
    start = this.state.start
  ) {
    return (
      `${url}?count=${count}&amp;start=${start}`
    );
  }

  fetchData() {
    fetch(this.requestURL())
      .then(response =&gt; response.json())
      .then(responseData =&gt; {
        let newStart = responseData.start + responseData.count;
        this.setState({
          movies: responseData.subjects,
          loaded: true,
          total: responseData.total,
          start: newStart,
        });
      })
      .done();
  }

  renderMovieList(movie, sectionId, rowId, highlightRow) {
    return (
      &lt;View&gt;
        &lt;View style={styles.item}&gt;
          &lt;View style={styles.itemImage}&gt;
            &lt;Image
              source={{uri: movie.images.large}}
              style={styles.image}
             /&gt;
          &lt;/View&gt;
          &lt;View style={styles.itemContent}&gt;
            &lt;Text style={styles.itemHeader}&gt;{movie.title}&lt;/Text&gt;
            &lt;Text style={styles.itemMeta}&gt;
              {movie.original_title} ( {movie.year} )
            &lt;/Text&gt;
            &lt;Text style={styles.redText}&gt;
              {movie.rating.average}
            &lt;/Text&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      &lt;/View&gt;
    );
  }

  loadMore() {
    fetch(this.requestURL())
      .then(response =&gt; response.json())
      .then(responseData =&gt; {
        let newStart = responseData.start + responseData.count;
        this.setState({
          movies: [...this.state.movies, ...responseData.subjects],
          start: newStart
        });
      })
      .done();
  }

  onEndReached() {
    console.log(
      `reached start:${this.state.start}, total:${this.state.total}`
    );

    if (this.state.total &gt; this.state.start) {
      this.loadMore();
    }
  }

  renderFooter() {
    if (this.state.total &gt; this.state.start) {
      return (
        &lt;View
          style={{
            marginVertical: 20,
            paddingBottom: 50,
            alignSelf: 'center'
          }}
        &gt;
          &lt;ActivityIndicatorIOS /&gt;
        &lt;/View&gt;
      );
    } else {
      return (
        &lt;View
          style={{
            marginVertical: 20,
            paddingBottom: 50,
            alignSelf: 'center'
          }}
        &gt;
          &lt;Text
            style={{
              color: 'rgba(0, 0, 0, 0.3)'
            }}
          &gt;no more load :D&lt;/Text&gt;
        &lt;/View&gt;
      );
    }
  }

  render() {
    if (!this.state.loaded) {
      return (
        &lt;View style={{backgroundColor: '#eae7ff', flex: 1}}&gt;
          &lt;View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}&gt;
            &lt;ActivityIndicatorIOS
              size="large"
              color="#6435c9"
            /&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      );
    }
    return (
      &lt;View style={{backgroundColor: '#eae7ff', flex: 1}}&gt;
        &lt;ListView
          renderFooter={this.renderFooter.bind(this)}
          pageSize={this.state.count}
          onEndReached={this.onEndReached.bind(this)}
          initialListSize={this.state.count}
          dataSource={this.dataSource.cloneWithRows(this.state.movies)}
          renderRow={this.renderMovieList.bind(this)}
        /&gt;
      &lt;/View&gt;
    );
  }
}
</code></pre>

<p>Thanks for all help!</p>