Nuanced Pterodactyl Monk

    react-native-gesture

    0.2.0 • Public • Published

    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

    Showcase

    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, {
      View,
      Text
    } from 'react-native';
     
    import {
      drag,
      pinch,
      GestureView
    } from 'react-native-gestures';
     
    export default React.createClass({
      render() {
        onGestureError(err) {
          console.error(err);
        },
        return (
          <View>
            <GestureView
              style={movable}
              gestures={[drag, pinch]}
              toStyle={(layout) => {
                return {
                  top: layout.y,
                  left: layout.x,
                  width: layout.width,
                  height: layout.height,
                  transform: [{rotate: `${layout.rotate}deg`}]
                }
              }}
              onError={console.error.bind(console)}>
              <Text>HEHE</Text>
              <Text>HEHE</Text>
            </GestureView>
          </View>
        );
      }
    });

    APIs

    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

    Example:

    let style = { position: 'absolute', backgroundColor: '#F00' };
     
    <GestureView
      style={style}
      onError={console.error.bind(console)}
      gestures={[...]}>
      <Text>This is the children I say</Text>
    </GestureView>

    Gestures

    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

    drag

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

    pinch

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

    Contribute

    Using

    js-standard-style

    Install

    npm i react-native-gesture

    DownloadsWeekly Downloads

    114

    Version

    0.2.0

    License

    MIT

    Last publish

    Collaborators

    • radiegtya