react-native-bouncing-ball
react native component bouncing ball for both iOS and Android. There are two ways to generate balls, <Image/>
and <View/>
.
Demo
Use the <Image/>
generate ball
Use the <View/>
generate ball
Install
npm i react-native-bouncing-ball --save
Example
Use the <Image/>
generate ball
;; { return <ImageBackground style=stylescontainer source=> <BouncingBalls amount=10 animationDuration=5000 minSpeed=30 maxSpeed=200 minSize=40 maxSize=100 imageBall= /> </ImageBackground> ; } const styles = StyleSheet;
Use the <View/>
generate ball
;; { return <ImageBackground style=stylescontainer source=> <BouncingBalls amount=10 animationDuration=5000 minSpeed=30 maxSpeed=200 minSize=40 maxSize=100 style= backgroundColor: '#CDFFCD' /> </ImageBackground> ; } const styles = StyleSheet;
API
Props | PropType | Default Value | Description |
---|---|---|---|
amount | number |
1 | the number of balls |
animationDuration | number |
5000 | Every section animation time |
animationType | func |
Easing.linear |
Animation type |
minSpeed | number |
30 | The slowest speed of the ball |
maxSpeed | number |
200 | The fastest speed of the ball |
minSize | number |
40 | The largest ball size |
maxSize | number |
100 | The smallest ball size |
style | object |
null | The style of the ball |
imageBall | object |
null | Choose Image generate ball |
LICENCE
MIT Licence