react-native-gogo-spin

| 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

Code

export const App = () => {
  const prize=[1,2,3,4,5,6]
  const spinRef = useRef<React.ElementRef<typeof GoGoSpin>>(null);
  const doSpin = () => {
    const getIdx = ~~(Math.random() * prize.length);
    spinRef.current.doSpinAnimate(getIdx);
  };
  const onEndSpin = (endSuccess: boolean) => {
    console.log('endSuccess', endSuccess);
  };
  return (
    <View style={styles.container}>
      <View style={styles.centerWheel}>
        <GoGoSpin
          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 (
              <View key={i} style={styles.itemWrapper}>
                <Text style={styles.prizeText}>{data.name}</Text>
                <Image source={data.image} style={{ width: 40, height: 40 }} />
              </View>
            );
          }}
        />
        <TouchableOpacity style={{ position: 'absolute' }} onPress={doSpin}>
          <Image source={require('./images/btn.png')} style={{ width: 105, height: 124 }} />
        </TouchableOpacity>
      </View>
    </View>
  );
};

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<ViewStyle> | 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