Skip to content
react native component bouncing ball for iOS and Android
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
components Update: Optimize the code Dec 13, 2018
example Update: Optimize the code Dec 13, 2018
.gitignore first commit Dec 12, 2018
.npmignore Update: update example, test npm package Dec 12, 2018
LICENSE first commit Dec 12, 2018
README.md Update: Update the README.md Dec 14, 2018
index.js first commit Dec 12, 2018
package.json Update: Optimize the code Dec 13, 2018

README.md

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

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

You can’t perform that action at this time.