react-native-lucky-wheel

A decent lucky wheel component for React-Native

It's sucks that writing a lucky wheel (known as wheel of fortune) component. I wrote one, so you wouldn't have to.

Table of Contents

• Getting started
  • Dependencies
• API
  • Props
  • Methods
• Usage
  • Advance Styling
  • Spin Types: Gesture and Method
  • Wheel Types: SVG and Image
  • Endless Spinning
  • Play Tick Sound
• Example App
• Contributing
• License

Getting started

:warning: it's not tested on field.

yarn add react-native-lucky-wheel

Dependencies

This library needs these dependencies to be installed in your project before you can use it:

For Expo CLI:

expo install react-native-svg

For React Native CLI

yarn add react-native-svg

Check react-native-svg installation guide.

API

The <LuckyWheel> component can take a number of inputs to customize it as needed. They are outlined below:

Props

| Name | Type | Required | Default Value | | :--------------------- | :---------------------------------------- | :------: | :---------------------------------: | | slices | ISlice[] | + | - | | padAngle | number | - | 0.01 | | outerRadius | number | - | 13 | | innerRadius | number | - | 30 | | duration | number | - | 4 | | enableGesture | boolean | - | false | | enablePhysics | boolean | - | false | | enableOuterDots | boolean | - | true | | gestureType | GestureType | - | GestureTypes.CLOCKWISE | | size | number | - | width - 40 | | winnerIndex | number | - | - | | minimumSpinVelocity | number | - | 1 | | textStyle | ITextStyle | - | - | | textAngle | TextAngleType | - | TextAngles.VERTICAL | | backgroundColorOptions | RandomColorOptionsSingle | - | {luminosity: 'dark', hue: 'random'} | | offset | number | - | 0 | | backgroundColor | Color | - | #FFF | | knobSize | number | - | 30 | | knobColor | Color | - | #FF0000 | | easing | EasingType | - | EasingTypes.OUT | | dotColor | Color | - | #000 | | onKnobTick | () => void | - | - | | onSpinningStart | () => void | - | - | | onSpinningEnd | (winner: ISlice) => void | - | - | | source | ImageSourcePropType | - | - | | customKnob | (params: ICustomKnob) => React.ReactChild | - | - | | customText | (params: IWheelText) => React.ReactChild | - | - | | waitWinner | boolean | - | false | | enableInnerShadow | boolean | - | true |

Methods

These are the various methods.

| Method | Params | Description | | :----- | :----: | :-------------- | | start | - | Start spinning. | | stop | - | Stop spinning. | | reset | - | Reset spinning. |

Usage

import LuckyWheel from 'react-native-lucky-wheel';

const SLICES = [
  { text: 'foo' },
  { text: 'bar' },
  { text: 'baz' },
  { text: 'qux' },
];

const App = () => {
  return <LuckyWheel slices={SLICES} />;
};

Advance Styling

I added some props to styling the wheel:

@TODO

Spin Types: Gesture and Method

You can spin the wheel with two different method:

@TODO

Wheel Types: SVG and Image

There are two different method to create a Lucky Wheel:

@TODO

Endless Spinning

If you want to select a winner after spinning begin you can use endless spinning feature of this library.

@TODO

Play Tick Sound

There are some libraries to play sound, I don't want to select one, so I decide to not add this feature. However, you can add this feature by yourself following below instructions:

@TODO

Example App

# clone the project
git clone https://github.com/ridvanaltun/react-native-lucky-wheel.git

# go into the project
cd react-native-lucky-wheel

# make project ready
npm run bootstrap

# go into the example
cd example

# run for android
npm run android

# or

# run for ios
npm run ios

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT