Skip to content

AuthEceSoftEng/react-native-leaderboard

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

34 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

Instant leaderboard for react native

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%