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 | Knob size | | knobSource | Path | knob.png  |  Knob 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/knob.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

MIT