react-native-gogo-spin

!license
| Example |
| :-------------------------------------- |
| !Example |

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

$3

`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 (


onEndSpinCallBack={onEndSpin}
notShowDividLine={true}
spinDuration={2000}
spinReverse={true}
spinTime={3}
ref={spinRef}
width={SIZE}
height={SIZE}
radius={SIZE / 2}
data={prize}
offsetEnable={true}
source={require('./images/wheel.png')}
renderItem={(data, i) => {
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