React native render listview on order

Question

I am viewing a list view using:

  render() {
    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderRow.bind(this)}/>
    );
  }

and

var dataSource = new ListView.DataSource(
  {rowHasChanged: (r1, r2) => r1.id !== r2.id});
this.state = {
  dataSource: dataSource.cloneWithRows(this.props.deals)
};

I hope I can sort this by value on the data source (this.props.deals.distance). Looking online and through documents, I cannot find a way to do this. Any tips?

Answer 1

Just sort the array of deals and set the data source.

let sortedDeals = this.props.deals.sort((a,b) => {
if (a.distance < b.distance) {
    return -1;
  }
  if (a.distance > b.distance) {
    return 1;
  }
  // a must be equal to b
  return 0;
});
let dataSource = dataSource.cloneWithRows(sortedDeals) 
this.setState({
    dataSource: dataSource
});