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: 16 days 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 (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-10-03T10:50:13.000Z (about 7 years ago)
• Last Synced: 2024-10-16T01:19:40.932Z (28 days 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.