@nativescript-community/gesturehandler

Installation

• tns plugin add @nativescript-community/gesturehandler

Be sure to run a new build after adding plugins to avoid any issues.

This is a port of react-native-gesturehandler. The source is based on the source code by Krzysztof Magiera. Dont hesitate to go and thank him for his work!

API

First you need to install the plugin:

tns plugin add @nativescript-community/gesturehandler

We need to do some wiring when your app starts, so open app.ts and add this before creating any View/App/Frame:

TypeScript

import { install } from "@nativescript-community/gesturehandler";
install();

You create a gesture handler using something like this:

import { GestureHandlerTouchEvent, GestureHandlerStateEvent, GestureStateEventData, GestureTouchEventData, HandlerType } from '@nativescript-community/gesturehandler';


function onGestureTouch(args: GestureTouchEventData) {
    const { state, extraData, view } = args.data;
    view.translateX = extraData.translationX;
    view.translateY = extraData.translationY;
}
function onGestureState(args: GestureStateEventData) {
    const { state, prevState, extraData, view } = args.data;
    console.log('onGestureState', state, prevState, view, extraData);
}
const manager = Manager.getInstance();
const gestureHandler = = manager.createGestureHandler(HandlerType.PAN, 10, {
    shouldCancelWhenOutside: false
});
gestureHandler.on(GestureHandlerTouchEvent, onGestureTouch, this);
gestureHandler.on(GestureHandlerStateEvent, onGestureState, this);
gestureHandler.attachToView(view);

Right now you must not forget to store the gestureHandler somewhere or the gesture won't work on iOS (native object being released). This will be fixed in future versions.

Now about the API. All the gestures for the react counterpart exist with the same options and the same event extraData.