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