title: Using a FlatList with scrollToEnd
body: <p>I have two issues when using a FlatList (that both work with a ListView).</p>
  
  <p>I have a list that is displayed via a display property for each item and then checked in my FlatList like so:</p>
  
  <pre><code>&lt;FlatList
    ref='flatList'
    data={this.state.dataSource}
    enableEmptySections
    renderItem={({item}) =&gt; item.display &amp;&amp; &lt;Text&gt;{item.text}&lt;/Text&gt;} /&gt;
  </code></pre>
  
  <p>When I change the display property, it doesn't display however. This worked fine in the ListView setup.</p>
  
  <p>My second problem is that scrollToEnd is firing an undefined error on "this._listref" which is within the scrollToEnd function. I pass no parameters to it.</p>
  
  <pre><code>setTimeout(this.refs.flatList.scrollToEnd, 0)
  </code></pre>
  
  <p>My questions are, how do I update the data in my array for the list so it changes in the list, and the second question is how do I fix the scrollToEnd error?</p>
  
  <p><strong>Update 1:</strong> (data removed, not needed anymore)</p>
  
  <p><strong>Update 2:</strong> Problem ONE solved, the list needs "extraData" comparison to see if it updates. The fixed edition:</p>
  
  <pre><code>&lt;FlatList
    ref='flatList'
    data={this.state.dataSource}
    extraData={this.state}
    enableEmptySections
    renderItem={({item}) =&gt; item.display &amp;&amp; &lt;Text&gt;{item.text}&lt;/Text&gt;} /&gt;
  </code></pre>
  
  <p>It's a bit convoluted, but I believe extraData acts as a comparison to see if anything in that data set updates. If so, re-render. That problem is solved.</p>
  
  <p><strong><em>"undefined is not an object (evaluating 'this._listRef')" still not fixed</em></strong></p>
  
  <p><strong>Update 3:</strong> Scroll function works IF taken outside the setTimeoutfunction</p>
  
  <p><strong>Update 4:</strong></p>
  
  <p>Setting the initial data array </p>
  
  <pre><code>  this.state = {
      dataSource: pageService(state.params.page),
      cursor: 0
    }
  </code></pre>
  
  <p>Setting display as true:</p>
  
  <pre><code>  renderNextModule() {
      let newCursor = this.state.cursor
      if (newCursor &lt; this.state.dataSource.length-1) {
  
          newCursor++
          let newSource = this.state.dataSource
          newSource[newCursor].display = true
          this.setState({
              dataSource: newSource,
              cursor: newCursor
          })
      }
    }
  </code></pre>