[react-native] Fixing ListView row updates

I recently encountered re-rendering problems with a ListView component displaying data from an array of objects. The problem was that the ListView wouldn't update sometimes despite the datasource changing. I've found that the best solution for this is to make sure datasource is not bound to the state.

In practice, instead of doing:

class Component extends React.Component {  
    constructor(props){
       super(props)
       let ds = new ListView.DataSource({ rowHasChanged: (r1, r2)=> return r1 !=== r2});
        this.state = {
            dataSource: ds.cloneWithRows([])
        }
    }
}

Bind ds to this:

class Component extends React.Component {  
    constructor(props){
       super(props)
       this.ds = new ListView.DataSource({ rowHasChanged: (r1, r2)=> return r1 !=== r2});
        this.state = {
            dataSource: this.ds.cloneWithRows([])
        }
    }
}

And whenever you do updates to the list, use this.ds

_updateRow = (props) => {  
       let newData = [blah, blah...]
        this.state = {
            dataSource: this.ds.cloneWithRows(newData)
        }
}