https://github.com/hankzhuo/react-native-bouncing-ball

react native component bouncing ball for iOS and Android
https://github.com/hankzhuo/react-native-bouncing-ball

react react-animations react-native react-native-component

Last synced: about 2 months ago
JSON representation

react native component bouncing ball for iOS and Android

• Host: GitHub
• URL: https://github.com/hankzhuo/react-native-bouncing-ball
• Owner: hankzhuo
• License: mit
• Created: 2018-12-12T08:02:42.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2018-12-14T07:26:02.000Z (about 6 years ago)
• Last Synced: 2024-08-16T17:53:51.399Z (5 months ago)
• Topics: react, react-animations, react-native, react-native-component
• Language: JavaScript
• Homepage:
• Size: 6.06 MB
• Stars: 39
• Watchers: 2
• Forks: 5
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-native - react-native-bouncing-ball ★8 - React Native component bouncing ball for both iOS and Android. (Components / UI)
• awesome-react-native - react-native-bouncing-ball ★8 - React Native component bouncing ball for both iOS and Android. (Components / UI)
• awesome-react-native - react-native-bouncing-ball ★8 - React Native component bouncing ball for both iOS and Android. (Components / UI)
• awesome-react-native - react-native-bouncing-ball ★8 - React Native component bouncing ball for both iOS and Android. (Components / UI)

README

        
# react-native-bouncing-ball

[![npm version](https://badge.fury.io/js/react-native-bouncing-ball.svg)](https://badge.fury.io/js/react-native-bouncing-ball) ![](https://img.shields.io/github/license/hankzhuo/react-native-bouncing-ball.svg)

React Native component bouncing ball for both iOS and Android. There are two ways to generate balls, `` and ``. The balls can always move randomly in the screen. When the component will Unmount, the animation will stop. 

## Demo

Use the `` generate ball

![ball_image](./example/images/ball-image.gif)

Use the `` generate ball

![ball_view](./example/images/ball-view.gif)

## 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 (

      

        

      

    );

  }

}

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 (

      

        

      

    );

  }

}

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