Declarative API exposing platform native touch and gesture system to NativeScript.

Usage no npm install needed!

<script type="module">
  import nativescriptCommunityGesturehandler from 'https://cdn.skypack.dev/@nativescript-community/gesturehandler';


npm npm GitHub forks GitHub stars


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!


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-community/gesturehandler";

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);

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.