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

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',
  }
});

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