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.

• 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

⚠️ it's not tested on field.

yarn add react-native-lucky-wheel

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.

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

These are the various methods.

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

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

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

I added some props to styling the wheel:

@TODO

You can spin the wheel with two different method:

@TODO

There are two different method to create a Lucky Wheel:

@TODO

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

@TODO

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

# 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

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

MIT