Skip to content

Commit ced8bae

Browse files
committed
chore: readme
1 parent 4167112 commit ced8bae

File tree

3 files changed

+76
-3
lines changed

3 files changed

+76
-3
lines changed
Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
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 }}

packages/gesturehandler/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
"build": "npm run tsc && npm run readme",
1010
"build.win": "npm run tsc.win && npm run readme",
1111
"build.all": "npm run build && npm run build.angular",
12-
"build.all.win": "npm run build .win&& npm run build.angular.win",
12+
"build.all.win": "npm run build .win && npm run build.angular.win",
1313
"build.angular": "../../node_modules/.bin/ng-packagr -p ../../src/gesturehandler/angular/package.json -c ../../src/gesturehandler/angular/tsconfig.json",
1414
"build.angular.win": "..\\..\\node_modules\\.bin\\ng-packagr -p ..\\..\\src\\gesturehandler\\angular\\package.json -c ..\\..\\src\\gesturehandler\\angular\\tsconfig.json",
1515
"readme": "../../node_modules/.bin/readme generate -c ../../tools/readme/blueprint.json",

src/gesturehandler/gesturehandler.android.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -198,8 +198,7 @@ export abstract class Handler<T extends com.swmansion.gesturehandler.GestureHand
198198
}
199199
},
200200
},
201-
})
202-
hitSlop;
201+
}) hitSlop;
203202
@nativeProperty enabled: boolean;
204203
@nativeProperty shouldCancelWhenOutside: boolean;
205204
shouldStartGesture: (arg) => boolean;

0 commit comments

Comments
 (0)