/react-native-wheel-of-fortune

React Native Wheel of Fortune Plugin

Primary LanguageJavaScript

react-native-wheel-of-fortune

Maintainability Download

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

Joaquin Beceiro

License

MIT