node package manager
It’s your turn. Help us improve JavaScript. Take the 2017 JavaScript Ecosystem Survey »


React Native Gestures

⚠️ This package is still in early stage, it will have a heaps of API changes before it move to 1.0 ⚠️

React Native Composable Gesture Library

Build Status npm version npm version Issue Stats Issue Stats js-standard-style


Getting Start

Assuming you are using react-native, because I don't know how it will work in other libraries...

  • Install via npm
npm i -S react-native-gestures

Then write some js like the simple code samples as a React component and render it in your react-native app.

import React, {
} from 'react-native';
import {
} from 'react-native-gestures';
export default React.createClass({
  render() {
    onGestureError(err) {
    return (
          gestures={[drag, pinch]}
          toStyle={(layout) => {
            return {
              top: layout.y,
              left: layout.x,
              width: layout.width,
              height: layout.height,
              transform: [{rotate: `${layout.rotate}deg`}]


As you can see, it's just a very simple React component you can use in this package, maybe it will have more components in the future, or not.

There are few properties it accpets:

  • gestures - a Array of gestures
  • onError - a Function will be called when anything bad happens
  • style - a style same as <View>'s style property
  • toStyle - a mapping function that allow you to pick the changes you want to css style
  • children - ... you know, just React children, nothing special


let style = { position: 'absolute', backgroundColor: '#F00' };
  <Text>This is the children I say</Text>


Every gesture in this module is just a simple combination of two things:

  1. A transducer called calculate(please suggest me a better name)

    This is the actual function that calculates the new positions of the view when the move gesture event comes in.

  2. A number called GESTURE_NUMBER

    This define that the gesture will start calculate when the gesture number matches this number.

    You can set any number you want if your touch screen supports it :p


It's just a simple transducer takes one finger input with the move of the finger and generates new layout of the component.


It's a pinch gesture, also a zoom gesture. It takes two fingers gestures and generates new layout of the component.