react-native-lucky-wheel
TypeScript icon, indicating that this package has built-in type declarations

0.2.2 • Public • Published

react-native-lucky-wheel

npm version CircleCI Commitizen friendly license

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

⚠️ 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

/react-native-lucky-wheel/

    Package Sidebar

    Install

    npm i react-native-lucky-wheel

    Weekly Downloads

    46

    Version

    0.2.2

    License

    none

    Unpacked Size

    151 kB

    Total Files

    44

    Last publish

    Collaborators

    • ridvanaltun