title: react-native: ListView, how to push new rows from top
body: <p>I have been trying to understand how I could manage to make a ListView that can recieve often new data and push it to the front. With the code below, the list does not reflect change correctly, instead of having a new row at the top, the last one is beeing duplicated..</p>
  
  <pre><code>'use strict';
  
  var React = require('react-native');
  var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ListView,
    TouchableHighlight,
  } = React;
  
  var listview = React.createClass({
    rows: [],
  
    _rowHasChanged: function (r1, r2) {
      // if (r1 !== r2)
      //   console.log('rowChanged', r1, r2);
      // else
      //   console.log('row didn\'t Changed', r1, r2);
      return r1 !== r2;
    },
  
    getInitialState: function() {
      return {
        dataSource: new ListView.DataSource({rowHasChanged: this._rowHasChanged}),
      };
    },
  
    componentDidMount: function () {
      this.rows = [
        {id: 0, text: '0: text'},
        {id: 1, text: '1: text'},
        {id: 2, text: '2: text'},
        {id: 3, text: '3: text'},
      ];
  
      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(this.rows),
      });
    },
  
    pushTopRow: function () {
      var id = this.rows.length;
      this.rows.unshift({id: id, text: id + ': text'});
  
      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(this.rows),
      });
    },
  
    render: function() {
      return (
        &lt;View style={styles.container}&gt;
          &lt;ListView
            dataSource={this.state.dataSource}
            renderRow={(rowData) =&gt; &lt;Text key={rowData.id}&gt;{rowData.text}&lt;/Text&gt;}
          /&gt;
          &lt;TouchableHighlight
            onPress={this.pushTopRow}&gt;
            &lt;Text&gt;PUSH TOP&lt;/Text&gt;
          &lt;/TouchableHighlight&gt;
        &lt;/View&gt;
      );
    },
  });
  
  var styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: 'orange',
    },
  });
  
  AppRegistry.registerComponent('listview', () =&gt; listview);
  </code></pre>
  
  <p>then I tried:</p>
  
  <pre><code>pushTopRow: function () {
      var id = this.rows.length;
      var newRow = [{id: id, text: id + ': text'}];
      this.rows = newRow.concat(this.rows);
  
      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(this.rows),
      });
    },
  </code></pre>
  
  <p>this actually works, but I don't understand why first method doesn't work. I'm trying to figure out what is the best practises for handling with ListView:</p>
  
  <ul>
  <li>Am I supposed to use cloneWithRows with a new array in any case, even
  for a single add/delete operation ?</li>
  <li>Is there anything else to setup for the ListView/DataSource mechanics to works correctly with minimum redraw (keys, hasRowChanged
  specific comparision ?),</li>
  </ul>
  
  <p>kind of lacking of documentations and exemples, it would be great to clarify it for me and anyone. thanks you &amp; have a good code day.</p>