rnp
react-native-pan-controller
npm i react-native-pan-controller
rnp

react-native-pan-controller

A react native component to help with common use cases for scrolling/panning/etc

by Leland Richardson

0.0.1 (see all)License:MITTypeScript:Not Found
npm i react-native-pan-controller
Readme

react-native-pan-controller

Motivation

The PanResponder class in React Native is incredibly useful, and can handle a broad range of interactions/animatinos. Unfortunately, there are a lot of very common interactions/animations that require a lot of the same boilerplate in order to get them working properly, and that code is not necessarily straight forward.

The <PanController /> component is intended to much more easily handle a lot of these common scenarios. See below for usage.

Installation

$ npm install --save react-native-pan-controller

API (props)

Behavior Config

PropDefaultTypeDescription
panXnew Animated.Value(0)Animated...
panYnew Animated.Value(0)Animated...
horizontalfalseBoolean...
verticalfalseBoolean...
lockDirectiontrueBoolean...
overshootX"spring"`"spring""clamp"`
overshootY"spring"`"spring""clamp"`
xMode"decay"`"decay""snap"
yMode"decay"`"decay""snap"
xBounds[-Infinity, Infinity]Array<Number>...
yBounds[-Infinity, Infinity]Array<Number>...
snapSpacingXnullNumber...
snapSpacingYnullNumber...

Animation Config

PropDefaultTypeDescription
overshootSpringConfig{ friction: 7, tension: 40 }Object...
momentumDecayConfig{ deceleration: 0.993 }Object...
overshootSpringConfig{ friction: 7, tension: 40 }Object...
directionLockDistance10Number...
overshootReductionFactor3Number...

Events

PropParametersDescription
onOvershootNO...
onDirectionChangeNO...
onReleaseXNO...
onReleaseYNO...
onReleaseNO...

Examples

There is an example project where you can run and inspect all of the below examples if you want. In order to do so, you must first do the following:

$ cd examples
$ npm install

ScrollView

CoverFlow

PageScroller

PullToRefresh

Chat Heads

Window Shade

Contributing

PR's welcome. Additionally, if you have an interaction that you think might be able to be handled by the PanController, but you're not quite sure how to implement it, give me an example of the interaction and I'll try to get it working and add an example.

If it is not easily implemented using the PanController, but seems like a strong use-case, I may extend the implementation to handle it more easily.

License

MIT License.

No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate