react-native-bouncing-ball
React Native component bouncing ball for both iOS and Android. There are two ways to generate balls, <Image/> and <View/>. The balls can always move randomly in the screen. When the component will Unmount, the animation will stop.
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
import React, {PureComponent} from 'react';
import {StyleSheet, ImageBackground} from 'react-native';
import BouncingBalls from 'react-native-bouncing-ball'
export default class BouncingBallsComponent extends PureComponent {
render() {
return (
<ImageBackground style={styles.container} source={require('./images/background.jpg')}>
<BouncingBalls
amount={10}
animationDuration={5000}
minSpeed={30}
maxSpeed={200}
minSize={40}
maxSize={100}
imageBall={require('./images/bouncing_ball.png')}
/>
</ImageBackground>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}
});Use the <View/> generate ball
import React, {PureComponent} from 'react';
import {StyleSheet, ImageBackground} from 'react-native';
import BouncingBalls from 'react-native-bouncing-ball'
export default class BouncingBallsComponent extends PureComponent {
render() {
return (
<ImageBackground style={styles.container} source={require('./images/background.jpg')}>
<BouncingBalls
amount={10}
animationDuration={5000}
minSpeed={30}
maxSpeed={200}
minSize={40}
maxSize={100}
style={{
backgroundColor: '#CDFFCD'
}}
/>
</ImageBackground>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}
});Props
| 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