Skip to content
This repository has been archived by the owner on Dec 19, 2022. It is now read-only.

kiddkai/react-native-gestures

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

4145bf5

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

Composable React Native Gestures

Resources

Stars

Watchers

Forks

Packages

No packages published