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.