Home

Awesome

react-native-bouncing-ball

npm version

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

ball_image

Use the <View/> generate ball

ball_view

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

PropsPropTypeDefault ValueDescription
amountnumber1the number of balls
animationDurationnumber5000Every section animation time
animationTypefuncEasing.linearAnimation type
minSpeednumber30The slowest speed of the ball
maxSpeednumber200The fastest speed of the ball
minSizenumber40The largest ball size
maxSizenumber100The smallest ball size
styleobjectnullThe style of the ball
imageBallobjectnullChoose Image generate ball

LICENCE

MIT Licence