react-native-wheel-of-fortune

Forked from suusofttruongnv/react-native-wheel-of-fortune We did some modifications to fit our needs.

Wheel of fortune component for React Native

Installation

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

yarn add @fidme/react-native-wheel-of-fortune
# or using npm
npm i @fidme/react-native-wheel-of-fortune --save

Dependencies

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

Import

import WheelOfFortune from "@fidme/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
typeRewards	[String]	require	Set type rewards
sizeIconReward	Number	30	Icon reward size
iconRewards	[Path]	[knoob.png]	Icon reward source

Usage

const participants = [
  '%10',
  '%20',
  '%30',
  '%40',
  '%50',
  '%60',
  '%70',
  '%90',
  'FREE',
];

const typeRewards = [
  'Point',
  'Gold',
  'Cash',
  'Point',
  'Gold',
  'Cash',
  'Point',
  'Gold',
  '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'),
      typeRewards: typeRewards,
      sizeIconReward: 40,
      iconRewards: iconRewards,
      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.

Contributors

License

MIT