# react-native-gogo-spin > React native wheel of fortune view component Latest version **0.0.5** (published 2023-07-26) · Apache-2.0 license · 0 weekly downloads ## Install ```sh npm install react-native-gogo-spin pnpm add react-native-gogo-spin yarn add react-native-gogo-spin bun add react-native-gogo-spin ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.0.5 | | Published | 2023-07-26 | | First published | 2023-05-19 | | Weekly downloads | 0 | | License | Apache-2.0 | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 1 | | Unpacked size | 57.7 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 5 | | Author | Theo | | Maintainers | for4die | | Keywords | hooks, typescript, component, react native, react-native, react, native, wheel-of-fortune, wheel, fortune, android, ios, web, react native wheel of fortune, rn wheel of fortune, react wheel of fortune, react native wheel of luck, rn wheel of luck, react native gogo spin, react native spin | ## Links - npm: https://www.npmjs.com/package/react-native-gogo-spin - Repository: https://github.com/282931/react-native-gogo-spin - Homepage: https://github.com/282931/react-native-gogo-spin#readme - Issues: https://github.com/282931/react-native-gogo-spin/issues - npm.io page: https://npm.io/package/react-native-gogo-spin ## Dependencies (1) - [react-native-animatable](https://npm.io/package/react-native-animatable.md) ^1.3.3 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 0.0.5 (latest) — 2023-07-26 - 0.0.4 — 2023-05-19 - 0.0.3 — 2023-05-19 - 0.0.1 — 2023-05-19 ## README # react-native-gogo-spin [![supports iOS](https://img.shields.io/badge/iOS-4630EB.svg?style=flat-square&logo=APPLE&labelColor=999999&logoColor=fff)](https://www.npmjs.com/package/react-native-gogo-spin) [![supports Android](https://img.shields.io/badge/Android-4630EB.svg?style=flat-square&logo=ANDROID&labelColor=A4C639&logoColor=fff)](https://www.npmjs.com/package/react-native-gogo-spin) [![npm](https://img.shields.io/npm/v/react-native-gogo-spin.svg)](https://www.npmjs.com/package/react-native-gogo-spin) [![npm](https://img.shields.io/npm/dm/react-native-gogo-spin.svg)](https://www.npmjs.com/package/react-native-gogo-spin) ![license](https://img.shields.io/npm/l/react-native-gogo-spin.svg) | Example | | :-------------------------------------- | | ![Example](https://raw.githubusercontent.com/282931/react-native-gogo-spin/master/example/gif/demo.gif) | ## Installation ``` yarn add react-native-gogo-spin ``` or ``` npm install react-native-gogo-spin --save ``` ## Notice worked in react native web and ios android ,you can custom each pie base on array you passed in,like Flatlist;check the example to seek the usage; ## Examples [React Native example](./example/App.tsx) ### Code ```jsx export const App = () => { const prize=[1,2,3,4,5,6] const spinRef = useRef>(null); const doSpin = () => { const getIdx = ~~(Math.random() * prize.length); spinRef.current.doSpinAnimate(getIdx); }; const onEndSpin = (endSuccess: boolean) => { console.log('endSuccess', endSuccess); }; return ( { return ( {data.name} ); }} /> ); }; ``` ## Methods | Prop | Default | Type | Description | | :-------------------------- | :-----------------------------------------------: | :-------------------------------------: | :------------------------------------------------------------------------------------ | | doSpinAnimate | - | `(idx: number) => void` | spin to the given index in data prop | ## Props | Prop | Default | Type | Description | | :-------------------------- | :-----------------------------------------------: | :-------------------------------------: | :------------------------------------------------------------------------------------ | | data(required) | - | `array` | Like data in flatlist | | renderItem(required) | - | `(data,index)=>React.ReactElement` | Like renderItem in flatlist | | width/height/radius(required) | - | `number` | Size of the wheel | | source | - | `ImageSourcePropType` | this props shows a background image if it exist | | onEndSpinCallBack | - | `(finish: boolean) => void` | call after spin end | | notShowDividLine | false | `boolean` | if show the dividing line between each pie | | offsetEnable | false | `boolean` | false will point to the center of the pie ,true will randomly point to the section of the pie | | offsetPercent | 0.9 | `number 1-0.1` | time to offset random angle only works if offsetEnable is true | | spinReverse | false | `boolean` | spin reverse | | wheelStyle | 8000 | `StyleProp` | the style of the outside wheel | spinTime | 8 | `number` | the number of the wheel make turns after it point to the prize | | spinDuration | 8000 | `number` | The time(ms) whole spin animation last | | innerHeight/innerWidth | 50 | `number` | item in pie default size | ## Author 282931 --- _Source: https://npm.io/package/react-native-gogo-spin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._