CODEWITHSUNDEEP
firebaselistviewreact-nativefirebase-realtime-database
Gustavo Menezes
Gustavo Menezes

Reputation: 141

React-native ListView sort data

anyone knows how to sort data in react-native listview?

Below is the data I'm retrieving from firebase/database and I'd like to sort by score and then render something like a leaderboard.

(3) [{…}, {…}, {…}]
 0:
  data:{nome: "username", score: 100, status: "in"}
__proto__:Object
 1:{data: {…}}
 2:{data: {…}}
 length:3
__proto__:Array(0)

pls see the code below:

class Leaderboards extends Component {

  componentWillMount() {
    this.props.leaderboards();
    this.criaFonteDeDados(this.props.leader);
  }

  componentWillReceiveProps(nextProps) {
    this.criaFonteDeDados(nextProps.leader);
  }

  criaFonteDeDados(leader) {
    const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
    this.fonteDeDados = ds.cloneWithRows(leader);
  }

  renderRow(leader) {
    return (
      <View>
        <Text>{leader.data.score}</Text>
        <Text>{leader.data.nome}</Text>
      </View>
    );
  }

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

const mapStateToProps = state => {
  const leader = _.map(state.LeaderboardsReducer, (val) => {
    return { ...val };
  });
  return { leader };
};

export default connect(mapStateToProps, { leaderboards })(Leaderboards);

Upvotes: 2

Views: 1083

Answers (1)

Pedro Sim&#227;o
Pedro Sim&#227;o

Reputation: 293

After fetching your data from firebase you have to sort your array. To sort by score you should have something like

data.sort(function(a,b) {
   return (a.score > b.score) ? 1 : ((b.score > a.score) ? -1 : 0);
});

Afterwards don't forget to set your component state with the sorted array.

Upvotes: 3

Related Questions