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.

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

eftalyurtseven / react-native-wheel-of-fortune

readme