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 --save

Dependencies

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
    wheelOptions={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

MIT