react-native-pan-controller

    0.0.1 • Public • Published

    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

    Prop Default Type Description
    panX new Animated.Value(0) Animated ...
    panY new Animated.Value(0) Animated ...
    horizontal false Boolean ...
    vertical false Boolean ...
    lockDirection true Boolean ...
    overshootX "spring" "spring"|"clamp" ...
    overshootY "spring" "spring"|"clamp" ...
    xMode "decay" "decay"|"snap"|"spring-origin" ...
    yMode "decay" "decay"|"snap"|"spring-origin" ...
    xBounds [-Infinity, Infinity] Array<Number> ...
    yBounds [-Infinity, Infinity] Array<Number> ...
    snapSpacingX null Number ...
    snapSpacingY null Number ...

    Animation Config

    Prop Default Type Description
    overshootSpringConfig { friction: 7, tension: 40 } Object ...
    momentumDecayConfig { deceleration: 0.993 } Object ...
    overshootSpringConfig { friction: 7, tension: 40 } Object ...
    directionLockDistance 10 Number ...
    overshootReductionFactor 3 Number ...

    Events

    Prop Parameters Description
    onOvershoot NO ...
    onDirectionChange NO ...
    onReleaseX NO ...
    onReleaseY NO ...
    onRelease NO ...

    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.

    Install

    npm i react-native-pan-controller

    DownloadsWeekly Downloads

    0

    Version

    0.0.1

    License

    MIT

    Last publish

    Collaborators

    • intelligibabble