title: How to initially load a Flatlist from the end of a data set
body: <p>I'm trying to use a flatlist to diplay all of the messages for a chat app, however I keep running into problems. The flatlist acts very strange, when there are more than 20-30 messages and the performance starts to get slower. </p>
  
  <p>I've noticed that part of this problem is because when a messaging room is first loaded the flatlist will start at the beginning and then scroll all the way to the bottom of the message list, loading all the messages. </p>
  
  <p>I've implemented my data component as <code>PureComponent</code> to try and increase performance, but it still seems to be behaving strangely. Is there a way that I can load in only the end of the flatlist initially and then when I scroll up load the rest of the messages?</p>
  
  <p>Here is my code for the flatlist:</p>
  
  <pre><code>&lt;FlatList
    data={this.state.messages}
    ref={ref =&gt; this.flatList = ref}
    scrollEventThrottle={16}
    onContentSizeChange={() =&gt; this.flatList.scrollToEnd({animated: true})}
    onLayout={() =&gt; this.flatList.scrollToEnd({animated:true})}
    keyExtractor = {this._keyExtractor}
    renderItem={this._renderItem}
  /&gt;
  
  _renderItem = ({item}) =&gt; (
    &lt;TextBubble 
      contents={item.contents}
      timestamp={item.timestamp}
      sender={item.sender}
      index={item.index}
      messages={this.state.messages}
      currentUser={this.state.currentUser}
      day={this.state.day}
      weekdays={this.state.weekdays}
    /&gt;
  );
  
  _keyExtractor = (item) =&gt; JSON.stringify(item.timestamp);
  </code></pre>
  
  <p>Here is where I get all the messages from Firebase in <code>componentDidMount()</code>:</p>
  
  <pre><code>let db = firebase.database();
  let ref = db.ref("/rooms/" + roomNo + "/messages");
  //the messages
  let childData = [];
  ref.on('value', function(snapshot) {
    // firebase.database().ref('/users/'+username+"/rooms/"+roomNo+"/unread").set(false)
    childData = [];
    snapshot.forEach(function(childSnapshot) {
      childData.push(childSnapshot.val())
    });
    this.setState({
      messages: childData
    })
  }.bind(this));
  </code></pre>
  
  <p>I've tried reversing the array and then inverting the flatlist but that results in all kinds of weird behavior and still doesn't load from the bottom up.</p>