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.