https://github.com/kiok46/react-native-collidable
Collidable Components for React-Native
https://github.com/kiok46/react-native-collidable
collision-handling floating gravity npm-package physics react react-component react-native
Last synced: over 1 year ago
JSON representation
Collidable Components for React-Native
- Host: GitHub
- URL: https://github.com/kiok46/react-native-collidable
- Owner: kiok46
- License: mit
- Created: 2017-07-27T10:38:51.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-10-03T10:50:13.000Z (over 8 years ago)
- Last Synced: 2025-02-28T07:02:58.774Z (over 1 year ago)
- Topics: collision-handling, floating, gravity, npm-package, physics, react, react-component, react-native
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-native-collidable
- Size: 1.79 MB
- Stars: 9
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-collidable
Collidable Components in react native
### IntroScreen Example
### Bouncing Football Example
### Note: Only tested with iOS, not recommended to be used until `version 1.0` is released.
Find a working example on Expo: https://exp.host/@kiok46/collidable
#### Properties
*Note: Other properties will be passed down to underlying component.*
| Prop | Description | Default |
|---|---|---|
|**`disablePanResponder`**| Whether to use PanResponder or not. |*false*|
|**`containerDimension`**|For how long the animation will run (milliseconds). |`[0, Screen Width, Screen Height, 0]`|
|**`collidableOffSetHeight`**| Use `Container Height - Component Height` to create a illusion of contact with the edges. |`75`|
|**`collidableOffSetWidth`**| Use `Container Width - Component Width` to create a illusion of contact with the edges. |`75`|
|**`initialVelocityX`**| Initial Velocity of Component in x-direction |`0`|
|**`initialVelocityY`**| Initial Velocity of Component in y-direction |`0`|
|**`velocityMinX`**| Minimum velocity in x-direction required to to stop the Component |`0.06`|
|**`velocityMinY`**| Minimum velocity in y-direction required to to stop the Component |`0.06`|
|**`velocityMaxX`**| Max velocity in x-direction once reached use `ononReachingMaxVelocity` callback |`30`|
|**`velocityMaxY`**| Max velocity in y-direction once reached use `ononReachingMaxVelocity` callback |`30`|
|**`verticalGravityEnabled`**| Gravity effect in vertical direction |*false*|
|**`horizontalGravityEnabled`**| Gravity effect in horizontal direction |*false*|
|**`verticalGravity`**| Gravity effect value in vertical direction. |`.2`|
|**`horizontalGravity`**| Gravity effect value in horizontal direction. |`.2`|
|**`enableImpactForce`**| Impace force is used to reduce the speed of colliding Component after impact |*false*|
|**`verticalImpactForce`**| Impact force for reducing vertical speed |`0`|
|**`horizontalImpactForce`**| Impact force for reducing horizontal speed |`0`|
|**`collidableStyle`**| Style for the Animated Component |*None*|
|**`onReachingMaxVelocity`**| Called once the Component's velocity is >= `velocityMaxX` or `velocityMaxY` |`() => {}`|
### Want to contribute or need to see some improvements?
I would love that, please create an issue or send a PR.