Instant leaderboard for react native
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
examples shorten example name Nov 20, 2017
.gitignore initial commit Sep 1, 2017
example.gif Add files via upload Sep 1, 2017
index.js fix error in new react version May 17, 2018
package-lock.json 1.0.4 Nov 20, 2017
package.json 1.0.4 Nov 20, 2017
readme.md fix typo May 17, 2018

readme.md

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