by farfromrefuge | v0.1.16
Nativescript plugin for gestures
npm i --save nativescript-gesturehandler

npm npm GitHub forks GitHub stars



  • tns plugin add nativescript-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!


First you need to install the plugin:

tns plugin add nativescript-gesturehandler

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

import { install } from "nativescript-gesturehandler";

You create a gesture handler using something like this:

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

function onGestureTouch(args: GestureTouchEventData) {
const { state, extraData, view } =;
view.translateX = extraData.translationX;
view.translateY = extraData.translationY;
function onGestureState(args: GestureStateEventData) {
const { state, prevState, extraData, view } =;
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);

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.