react-native-gogo-spin v0.0.5

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

Props

Author

282931