react-native-bouncing-ball

 

react native component bouncing ball for both iOS and Android. There are two ways to generate balls, and .

Demo

Use the generate ball

!ball_image

Use the generate ball

!ball_view

Install

npm i react-native-bouncing-ball --save

Example

Use the generate ball

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

amount={10}
animationDuration={5000}
minSpeed={30}
maxSpeed={200}
minSize={40}
maxSize={100}
imageBall={require('./images/bouncing_ball.png')}
/>

);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}
});

`

Use the generate ball

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

amount={10}
animationDuration={5000}
minSpeed={30}
maxSpeed={200}
minSize={40}
maxSize={100}
style={{
backgroundColor: '#CDFFCD'
}}
/>

);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}
});

`

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