title: React Native ListView not updating on data change
body: <p>I'm not sure why the ListView isn't updating when my data changes.  I've striped my code down to make it easy to read and created a rnplay:</p>
  
  <p><a href="https://rnplay.org/apps/ivG0mg" rel="noreferrer">https://rnplay.org/apps/ivG0mg</a></p>
  
  <p>What I expect to happen is, the user clicks the list item and the row's bool <code>isCollapsed</code> is toggled making the background red.  What actually happens is the datasource is updated but the list view doesn't recognize the change and nothing new is rendered.  Any ideas?</p>
  
  <pre><code>'use strict';
  
  var React = require('react-native');
  
  var {
      ScrollView,
      Text,
      Image,
      StyleSheet,
      TouchableHighlight,
      AppRegistry,
      View,
      ListView,
  } = React;
  
  var styles = StyleSheet.create({
      container: {
          flex: 1,
          flexDirection: 'column',
          padding: 15,
      },
      red: {
          backgroundColor: "red",
      }
  });
  
  var foods = [
      {key: 'Almond Milk (Homemade)', details:''},
      {key: 'Club Soda', details:'', isCollapsed: true},
      {key: 'Coconut Milk/Cream', details:''},
      {key: 'Coconut Water', details:''},
      {key: 'Coffee/Espresso', details:'', isCollapsed: true},
      {key: 'Fruit Juice', details:''},
      {key: 'Kombucha', details:''},
      {key: 'Mineral Water', details:''},
      {key: 'Unsweetened Tea', details:''},
      {key: 'Water', details:''},
      {key: 'Fruit Juice', details:''},
      {key: 'Kombucha', details:''},
      {key: 'Mineral Water', details:''},
      {key: 'Unsweetened Tea', details:''},
      {key: 'Water', details:''},
      {key: 'Fruit Juice', details:''},
      {key: 'Kombucha', details:''},
      {key: 'Mineral Water', details:''},
      {key: 'Unsweetened Tea', details:''},
      {key: 'Water', details:''},
      {key: 'Fruit Juice', details:''},
      {key: 'Kombucha', details:''},
      {key: 'Mineral Water', details:''},
      {key: 'Unsweetened Tea', details:''},
      {key: 'Water', details:''},
      {key: 'Fruit Juice', details:''},
      {key: 'Kombucha', details:''},
      {key: 'Mineral Water', details:''},
      {key: 'Unsweetened Tea', details:''},
      {key: 'Water', details:''},
  ];
  
  class SampleApp extends React.Component{
      constructor(props){
          super(props);
          var ds = new ListView.DataSource({
              rowHasChanged: (row1, row2) =&gt; row1 !== row2,
          });
          this.state = {
              dataSource: ds.cloneWithRows(foods),
          };
      }
      _renderRow(data, sectionID, rowID) {
                  return (
                          &lt;TouchableHighlight 
                              style={[
                                      styles.container,
                                      data.isCollapsed &amp;&amp; styles.red]}
                  onPress={()=&gt;this.onCollapse(rowID)}&gt;
                  &lt;Text&gt;{data.key}&lt;/Text&gt;
              &lt;/TouchableHighlight&gt;
          );
      }
      onCollapse(rowID: number) {
          console.log("rowID", rowID);
          foods[rowID].isCollapsed = !foods[rowID].isCollapsed;
          this.setState({dataSource: this.state.dataSource.cloneWithRows(foods)});
      }
      render() {
          return(
              &lt;ListView
                  style={styles.subContainer}
                  dataSource={this.state.dataSource}
                  renderRow={this._renderRow.bind(this)}
                  initialListSize={15}/&gt;
          )
      }
  };
  
  AppRegistry.registerComponent('SampleApp', () =&gt; SampleApp);
  </code></pre>