All Projects → longseespace → react-native-hammerjs

longseespace / react-native-hammerjs

Licence: MIT license
A port of HammerJS for React Native. HammerJS is a javascript library for multi-touch gestures.

Programming Languages

javascript
184084 projects - #8 most used programming language
objective c
16641 projects - #2 most used programming language
HTML
75241 projects
python
139335 projects - #7 most used programming language
java
68154 projects - #9 most used programming language

Hammer Native

Hammer.JS for React Native. HammerJS is a javascript library for multi-touch gestures.

Build Status npm hammer.js

Installation

npm install --save react-native-hammerjs

Usage

import { Hammer, injectHammer } from 'react-native-hammerjs';

class YourComponent extends React.Component {
  componentDidMount() {
    const mc = this.props.hammer;
    mc.add( new Hammer.Pan({ direction: Hammer.DIRECTION_ALL, threshold: 0 }) );

    mc.on('pan', e => {
      console.log('pan', e);
    });
  }

  render() {
    const connectEventHandlers = this.props.connectEventHandlers;
    return connectEventHandlers(
      <View>
        <Content />
      </View>
    );
  }
}

export default injectHammer(YourComponent);

For more examples, check out examples folder

This module exposes:

  1. Hammer: Hammer class as in HammerJS
  2. injectHammer: A function that creates a Higher Order Component that wraps YourComponent and injects 2 props:
  • hammer: a Hammer.Manager object.
  • connectEventHandlers: a function connects native gesture responders with Hammer.Manager object.

Contributing

PRs are welcome!

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].