Socket
Book a DemoInstallSign in
Socket

@fidme/react-native-wheel-of-fortune

Package Overview
Dependencies
Maintainers
2
Versions
5
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@fidme/react-native-wheel-of-fortune

React Native Wheel Of Fortune Component.

2.1.4
latest
Source
npmnpm
Version published
Weekly downloads
10
-47.37%
Maintainers
2
Weekly downloads
 
Created
Source

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

React Native Wheel Of Fortune

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

PropertyTypeDefaultDesc
rewards (required)Array-Set Rewards
winnerNumberrandom Set winner index
colorsArray Default ColorsSegment background colors
duration (ms)Number10000Completion time (ms)
getWinner (required) callback(value,index) -Winner value and index callback function
backgroundColorString#FFFFFF Wheel background color
borderWidthNumber2Wheel border width
borderColor String #FFFFFFWheel border color
textColorString #FFFFFFRewards text color
knobSizeNumber20Knoob size
knoobSourcePathknoob.png  Knoob source
playButton render()exampleRender method for tap to play button
innerRadiusNumber100Set inner radius size
innerRadiusNumber100Set inner radius size
textAngleStringhorizontalSet angle of reward text
typeRewards[String]requireSet type rewards
sizeIconRewardNumber30Icon 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

Joaquin Beceiro

License

MIT

Keywords

react native wheel of fortune

FAQs

Package last updated on 27 Jun 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc

U.S. Patent No. 12,346,443 & 12,314,394. Other pending.