title: ScrollToEnd after update data for Flatlist
body: <p>I'm making a chat box with <code>Flatlist</code>. I want to add a new item to data then scroll to bottom of list. I use <code>scrollToEnd</code> method but it did not work. How can I do this?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;FlatList
          ref="flatList"
          data={this.state.data}
          extraData = {this.state}
          renderItem={({item}) =&gt; &lt;Text style={styles.chatFlatListItem}&gt;{item.chat}&lt;/Text&gt;}
  /&gt;
  
  AddChat(_chat){
      var arr = this.state.data;
      arr.push({key: arr.length, chat: _chat});
      var _data = {};
      _data["data"] = arr;
      this.setState(_data);
      this.refs.flatList.scrollToEnd();
   }</code></pre>
  </div>
  </div>
  </p>