|
| 1 | +{{ load:../../tools/readme/edit-warning.md }} |
| 2 | +{{ template:title }} |
| 3 | +{{ template:badges }} |
| 4 | +{{ template:description }} |
| 5 | + |
| 6 | +{{ template:toc }} |
| 7 | + |
| 8 | +## Installation |
| 9 | +Run the following command from the root of your project: |
| 10 | + |
| 11 | +`ns plugin add {{ pkg.name }}` |
| 12 | + |
| 13 | +## API |
| 14 | + |
| 15 | +We need to do some wiring when your app starts, so open `app.ts` and add this before creating any View/App/Frame: |
| 16 | +##### TypeScript |
| 17 | +```ts |
| 18 | +import { install } from "@nativescript-community/gesturehandler"; |
| 19 | +install(); |
| 20 | +``` |
| 21 | + |
| 22 | +You create a gesture handler using something like this: |
| 23 | +```typescript |
| 24 | +import { GestureHandlerTouchEvent, GestureHandlerStateEvent, GestureStateEventData, GestureTouchEventData, HandlerType } from '@nativescript-community/gesturehandler'; |
| 25 | + |
| 26 | + |
| 27 | +function onGestureTouch(args: GestureTouchEventData) { |
| 28 | + const { state, extraData, view } = args.data; |
| 29 | + view.translateX = extraData.translationX; |
| 30 | + view.translateY = extraData.translationY; |
| 31 | +} |
| 32 | +function onGestureState(args: GestureStateEventData) { |
| 33 | + const { state, prevState, extraData, view } = args.data; |
| 34 | + console.log('onGestureState', state, prevState, view, extraData); |
| 35 | +} |
| 36 | +const manager = Manager.getInstance(); |
| 37 | +const gestureHandler = = manager.createGestureHandler(HandlerType.PAN, 10, { |
| 38 | + shouldCancelWhenOutside: false |
| 39 | +}); |
| 40 | +gestureHandler.on(GestureHandlerTouchEvent, onGestureTouch, this); |
| 41 | +gestureHandler.on(GestureHandlerStateEvent, onGestureState, this); |
| 42 | +gestureHandler.attachToView(view); |
| 43 | +``` |
| 44 | + |
| 45 | +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. |
| 46 | + |
| 47 | +Now about the API. All the gestures for the react counterpart exist with the same options and the same event ```extraData```. |
| 48 | + |
| 49 | +## GestureRootView |
| 50 | + |
| 51 | +For the gestures to work correctly we need a `root` view which knows how to handle the gestures. |
| 52 | +If using `Page` (thus `Frame`) you don't need to do anything. |
| 53 | +In case you don't (drawer root view, modals, ...) then you can wrap your views in a `GestureRootView` which inherits `GridLayout` |
| 54 | + |
| 55 | +## Overriding Nativescript gestures |
| 56 | + |
| 57 | +This plugin can also override N gestures completely. This would give much more control over gestures and especially would allow to correctly handle simultaneous gestures likes `tap` and `longpress` |
| 58 | + |
| 59 | +To do that |
| 60 | + |
| 61 | +## Credits |
| 62 | + |
| 63 | +This is a port of [react-native-gesturehandler](https://kmagiera.github.io/react-native-gesture-handler/). |
| 64 | +The source is based on the source code by [Krzysztof Magiera](https://github.com/kmagiera). Dont hesitate to go and thank him for his work! |
| 65 | + |
| 66 | + |
| 67 | + |
| 68 | +### Examples: |
| 69 | + |
| 70 | +- [Basic](demo-snippets/vue/Basic.vue) |
| 71 | + - A basic example showing that overriding N gestures works, even in modals |
| 72 | + |
| 73 | +{{ load:../../tools/readme/demos-and-development.md }} |
| 74 | +{{ load:../../tools/readme/questions.md }} |
0 commit comments