Code Monkey home page Code Monkey logo

react-native-pan-controller's Introduction

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"
yMode "decay" `"decay" "snap"
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 ...
springOriginConfig { 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.

react-native-pan-controller's People

Contributors

lelandrichardson avatar

Watchers

Endrigo Antonini avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.