title: React Native (Redux) FlatList jumping to top of list when onEndReached called
body: <p>I have a FlatList in ReactNative which pulls a list of articles from an API. When the end of the list is reached on scrolling, a further page of articles is pulled from the API and appended to the articles list in a Redux reducer.</p>
  
  <p>The FlatList is set up as:</p>
  
  <pre><code>render() {
      return(
      &lt;FlatList data={this.props.articles.articles} // The initial articles list via Redux state
          renderItem={this.renderArticleListItem} // Just renders the list item.
          onEndReached={this.pageArticles.bind(this)} // Simply calls a Redux Action Creator/API
          onEndReachedThreshold={0}
          keyExtractor={item =&gt; item.id.toString()}/&gt;
     )};
  </code></pre>
  
  <p>The Redux 'articles' state object is mapped to the component using the React Redux connect function.  The relevant reducer (some items removed for brevity) looks like:</p>
  
  <pre><code>/// Initial 'articles' state object
  const INITIAL_STATE = {
      articles: [],
      loading: false,
      error: '',
      pageIndex: 0,
      pageSize: 10
  };
  
  export default(state = INITIAL_STATE, action) =&gt; {
  switch(action.type){
      // The relevant part for returning articles from the API
      case ARTICLES_SUCCESS:
          return { ...state, loading: false, articles: state.articles.concat(action.payload.items), 
              pageIndex: action.payload.pageIndex, pageSize: action.payload.pageSize}
     default:
         return state;
     }
  }
  </code></pre>
  
  <p>The payload is a simple object - the articles are contained in the <code>action.payload.items</code> array, and there is additional paging information as well in the payload (not important to this problem).</p>
  
  <p>Everything is fine with the API returning the correct data.</p>
  
  <p>The problem is that when the end of the FlatList is reached on scrolling, the API is called, the new articles are pulled fine and appended to the this.props.articles state object and to the FlatList, BUT the FlatList jumps/scrolls back to the first item in the list.</p>
  
  <p>I think the problem is probably with how I am returning the state in the Redux reducer but I'm not sure why.</p>
  
  <p>Is using <code>concat</code> the correct way to return the new state with the new articles appended?</p>