Awesome

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

LICENCE

MIT Licence