@nativescript-community/gesturehandler

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';
</script>

README

npm npm GitHub forks GitHub stars

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

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.