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