title: FlatList onEndReached being called multiple times
body: <p>I'm making a react native project where user can search images using Flickr API, Everything else is working fine but the problem i'm having while implementing pagination. I have used FlatList's <code>onEndReached</code> to detect when user has scrolled to the end on the list, but the problem is <code>onEndReached</code> is being called multiple times(including one during the first render). I have even disabled bounce as said <a href="https://github.com/facebook/react-native/issues/14015" rel="noreferrer">here</a> but it's still being called more than once</p>
  <pre><code> export default class BrowserHome extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        isLoading: false,
        tagParam: &quot;cat&quot;,
        pageNum: -1,
        data: [],
        photosObj: &quot;&quot;
      };
    }
  
    componentDidMount() {
      this.setState({
        isLoading: true
      });
      try {
        this.makeRequest();
      } catch {
        console.log(&quot;error has occurred&quot;);
      }
    }
  
    makeRequest = () =&gt; {
      const { tagParam, pageNum } = this.state;
      let url = `https://api.flickr.com/services/rest/? 
                 method=flickr.photos.search
                 &amp;api_key=${apiKey}&amp;format=json&amp;tags=${tagParam}
                 &amp;per_page=30&amp;page=${pageNum + 1}&amp;nojsoncallback=1`;
      fetch(url, {
        method: &quot;GET&quot;
      })
        .then(response =&gt; response.json())
        .then(responseJSON =&gt; {
          this.setState({
            data: this.state.data.concat(responseJSON.photos.photo),
            isLoading: false,
            pageNum: responseJSON.photos.page
          });
        })
        .catch(error =&gt; {
          console.log(error);
          this.setState({ isLoading: false });
          throw error;
        });
    };
  
    render() {
      if (this.state.isLoading) {
        return &lt;ActivityIndicator animating={true} size=&quot;large&quot; /&gt;;
      }
  
      return (
        &lt;View
          style={{
            flex: 1,
            height: 200,
            justifyContent: &quot;flex-start&quot;,
            width: screenSize.width,
            backgroundColor: &quot;black&quot;
          }}
        &gt;
          &lt;Text&gt;This is browserhome&lt;/Text&gt;
          &lt;FlatList
            style={{
              width: screenSize.width
            }}
            numColumns={3}
            data={this.state.data}
            keyExtractor={item =&gt; item.id}
            bounces={false}
            onEndReachedThreshold={1}
            onEndReached={({ distanceFromEnd }) =&gt; {
              this.loadMoreItem();
              alert(&quot;end reached call&quot;);
            }}
            renderItem={({ item, index }) =&gt; (
              &lt;&gt;
                &lt;ImageTile imageURL={this.createImageURL(item)} /&gt;
              //  &lt;Text style={{ color: &quot;white&quot; }}&gt;
               //   {index}
               //   {console.log(index)}
               // &lt;/Text&gt;
              &lt;/&gt;
            )}
          /&gt;
        &lt;/View&gt;
      );
    }
  
    createImageURL(item) {
      let server = item.server,
        id = item.id,
        secret = item.secret;
      let urlString = `https://farm${
        item.farm
      }.staticflickr.com/${server}/${id}_${secret}_s.jpg`;
      return urlString;
    }
  
    loadMoreItem() {
      this.makeRequest();
    }
  }
  </code></pre>