React Native Wheel Of Fortune Component (DP fork).
npm install react-native-wheel-of-fortune-dp
Wheel of fortune component for React Native
!React Native Wheel Of Fortune
Use the package manager npm and yarn to install react-native-wheel-of-fortune.
``bash`
yarn add react-native-wheel-of-fortuneor using npm
npm i react-native-wheel-of-fortune --save
`js`
import WheelOfFortune from 'react-native-wheel-of-fortune'
| - | 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 textUsage
`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}
/>
``Please make sure to update tests as appropriate.