1.6.0 • Published 2 years ago
@moja.dam/react-native-wheel-of-fortune v1.6.0
react-native-wheel-of-fortune
Wheel of fortune component for React Native
Installation
Use the package manager npm and yarn to install react-native-wheel-of-fortune.
yarn add react-native-wheel-of-fortune
# or using npm
npm i react-native-wheel-of-fortune --saveDependencies
WheelofFortune is dependent on react-native-svg and D3-shape plugins.
Import
import WheelOfFortune from 'react-native-wheel-of-fortune'Properties
| Property | Type | Default | Desc |
|---|---|---|---|
| rewards (required) | Array | - | Set Rewards |
| winner | Number | random | Set winner index |
| colors | Array | Default Colors | Segment background colors |
| duration (ms) | Number | 10000 | Completion time (ms) |
| getWinner (required) | callback(value,index) | - | Winner value and index callback function |
| backgroundColor | String | #FFFFFF | Wheel background color |
| borderWidth | Number | 2 | Wheel border width |
| borderColor | String | #FFFFFF | Wheel border color |
| textColor | String | #FFFFFF | Rewards text color |
| knobSize | Number | 20 | Knoob size |
| knoobSource | Path | knoob.png | Knoob source |
| playButton | render() | example | Render method for tap to play button |
| innerRadius | Number | 100 | Set inner radius size |
| innerRadius | Number | 100 | Set inner radius size |
| textAngle | String | horizontal | Set angle of reward text |
Usage
const participants = [
'%10',
'%20',
'%30',
'%40',
'%50',
'%60',
'%70',
'%90',
'FREE',
];
const wheelOptions = {
rewards: participants,
knobSize: 50,
borderWidth: 5,
borderColor: '#000',
innerRadius: 50,
duration: 4000,
backgroundColor: 'transparent',
textAngle: 'horizontal',
knobSource: require('./assets/images/knoob.png'),
getWinner: (value, index) => {
this.setState({winnerValue: value, winnerIndex: index});
},
onRef: ref => (this.child = ref),
};
<WheelOfFortune
options={wheelOptions}
/>
<Button title="Press me" onPress={ () => { this.child._onPress() } } />For more information and test go to /Example folder.
TODO
- Reset Wheel Functions
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.
Contributors
License
1.6.0
2 years ago