react-native-user-score
A flexible, lightweight user score component. The component responds to drags and not just clicks, icon boundaries are computed automatically.
Installation
npm i -S react-native-user-score
or
yarn add react-native-user-score
Usage
; ; ; <**> state = value: 2 scrollEnabled: true ; { return <View style= flex: 1 justifyContent: 'center' > <ScrollView scrollEnabled=thisstatescrollEnabled> <ScoreView value=thisstatevalue maximum=5 onChangeValue= this onChangeFinish= this renderItem= <Text color=active ? Colorsyellow20 : Colorsdark20 icon> Iconsstar </Text> /> </ScrollView> </View> ; }
Note: Text is a custom component to demonstrate coloring. You have absolute control in the icon rendered -- styling included.
Props
Name | Description | Default |
---|---|---|
value | Current score | 0 |
maximum | Maximum score | 5 |
spacing | Spacing between each component* | 10 |
onChangeValue | Func:bool=>JSX to render a single score component | Not supplied - requires implementation |
onChangeFinish | Func:() => void for triggering event after score is finaly changed | Not supplied - requires implementation |
* Spacing is applied as a right margin of all inner scores.
License
The MIT License.