Simple and configurable leaderboard component for react native

react-native-leaderboard

Simple and configurable leaderboard component for react native.

Up and Running

$ npm install --save react-native-leaderboard

Simple Example

//...
import Leaderboard from 'react-native-leaderboard';
//...
this.state = {
    data: [
        {userName: 'Joe', highScore: 52},
        {userName: 'Jenny', highScore: 120},
        //...
    ] //can also be an object of objects!: data: {a:{}, b:{}}
}

render() {
  return (
      <Leaderboard 
        data={this.state.data} 
        sortBy='highScore' 
        labelBy='userName'/>)
}

Props

Prop Type Required Description
data array or object yes Object array or object of objects
sortBy string yes Data property that should be sorted and displayed
labelBy string yes Data property that should be displayed to identify user
icon string no Data property that stores the avatar's URL
onRowPress function no Called when a row is clicked. Arguments: item, index
sort function no Override the default sort behavior. Arguments: data
renderItem function no Override the default row. Arguments: item, index
containerStyle object no Style for the outer container (RN.View)
rankStyle object no Style for the displayed rank (RN.Text)
labelStyle object no Style for the displayed name (RN.Text)
scoreStyle object no Style for displayed score (RN.Text)
avatarStyle object no Style for user images (RN.Image)
oddRowColor string no Background color for odd rows
evenRowColor string no Background color for even rows

GitHub