react-native-wheel-of-fortune


Wheel of fortune component for React Native

!React Native Wheel Of Fortune

Installation

Use the package manager npm and yarn to install react-native-wheel-of-fortune.

``bash
yarn add react-native-wheel-of-fortune


or using npm


npm i react-native-wheel-of-fortune --save
`

Dependencies

WheelofFortune is dependent on react-native-svg and D3-shape plugins.

Import

`js
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

`js
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),
};
options={wheelOptions}
/>
{ 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

MIT