{"id":4319,"url":"https://github.com/hankzhuo/react-native-bouncing-ball","last_synced_at":"2025-08-04T01:32:01.010Z","repository":{"id":57335817,"uuid":"161453181","full_name":"hankzhuo/react-native-bouncing-ball","owner":"hankzhuo","description":"react native component bouncing ball for iOS and Android","archived":false,"fork":false,"pushed_at":"2018-12-14T07:26:02.000Z","size":6359,"stargazers_count":39,"open_issues_count":1,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-08-16T17:53:51.399Z","etag":null,"topics":["react","react-animations","react-native","react-native-component"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hankzhuo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-12-12T08:02:42.000Z","updated_at":"2023-03-09T04:12:08.000Z","dependencies_parsed_at":"2022-09-26T21:02:04.651Z","dependency_job_id":null,"html_url":"https://github.com/hankzhuo/react-native-bouncing-ball","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hankzhuo%2Freact-native-bouncing-ball","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hankzhuo%2Freact-native-bouncing-ball/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hankzhuo%2Freact-native-bouncing-ball/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hankzhuo%2Freact-native-bouncing-ball/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hankzhuo","download_url":"https://codeload.github.com/hankzhuo/react-native-bouncing-ball/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228582487,"owners_count":17940587,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","react-animations","react-native","react-native-component"],"created_at":"2024-01-05T20:17:08.108Z","updated_at":"2024-12-07T08:30:30.381Z","avatar_url":"https://github.com/hankzhuo.png","language":"JavaScript","funding_links":[],"categories":["Components"],"sub_categories":["UI"],"readme":"# react-native-bouncing-ball\n\n[![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)\n\nReact Native component bouncing ball for both iOS and Android. There are two ways to generate balls, `\u003cImage/\u003e` and `\u003cView/\u003e`. The balls can always move randomly in the screen. When the component will Unmount, the animation will stop. \n\n## Demo\n\nUse the `\u003cImage/\u003e` generate ball\n\n![ball_image](./example/images/ball-image.gif)\n\nUse the `\u003cView/\u003e` generate ball\n\n![ball_view](./example/images/ball-view.gif)\n\n## Install\n\n`npm i react-native-bouncing-ball --save`\n\n## Example\n\nUse the `\u003cImage/\u003e` generate ball\n\n```javascript\nimport React, {PureComponent} from 'react';\nimport {StyleSheet, ImageBackground} from 'react-native';\nimport BouncingBalls from 'react-native-bouncing-ball'\n\nexport default class BouncingBallsComponent extends PureComponent {\n  render() {\n    return (\n      \u003cImageBackground style={styles.container} source={require('./images/background.jpg')}\u003e\n        \u003cBouncingBalls\n          amount={10}\n          animationDuration={5000}\n          minSpeed={30}\n          maxSpeed={200}\n          minSize={40}\n          maxSize={100}\n          imageBall={require('./images/bouncing_ball.png')}\n         /\u003e\n      \u003c/ImageBackground\u003e\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n  }\n});\n\n```\n\nUse the `\u003cView/\u003e` generate ball\n\n```javascript\nimport React, {PureComponent} from 'react';\nimport {StyleSheet, ImageBackground} from 'react-native';\nimport BouncingBalls from 'react-native-bouncing-ball'\n\nexport default class BouncingBallsComponent extends PureComponent {\n  render() {\n    return (\n      \u003cImageBackground style={styles.container} source={require('./images/background.jpg')}\u003e\n        \u003cBouncingBalls\n          amount={10}\n          animationDuration={5000}\n          minSpeed={30}\n          maxSpeed={200}\n          minSize={40}\n          maxSize={100}\n          style={{\n            backgroundColor: '#CDFFCD'\n          }}\n         /\u003e\n      \u003c/ImageBackground\u003e\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n  }\n});\n\n```\n\n## Props\n\n| Props | PropType | Default Value | Description |\n| ----- | --------- | ------------| ------------- | \n| amount | `number` |  1 | the number of balls |\n| animationDuration | `number` |  5000 | Every section animation time |\n| animationType | `func` | `Easing.linear` | Animation type |\n| minSpeed | `number` |  30 | The slowest speed of the ball |\n| maxSpeed | `number` |  200 | The fastest speed of the ball |\n| minSize | `number` |  40 | The largest ball size |\n| maxSize | `number` |  100 | The smallest ball size |\n| style | `object` |  null | The style of the ball |\n| imageBall | `object` | null | Choose `Image` generate ball|\n\n## LICENCE\n\nMIT Licence\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhankzhuo%2Freact-native-bouncing-ball","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhankzhuo%2Freact-native-bouncing-ball","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhankzhuo%2Freact-native-bouncing-ball/lists"}