|
1 | | -[](https://www.npmjs.com/package/@nativescript-community/gesturehandler) |
2 | | -[](https://www.npmjs.com/package/@nativescript-community/gesturehandler) |
3 | | -[](https://github.com/nativescript-community/gesturehandler/network) |
4 | | -[](https://github.com/nativescript-community/gesturehandler/stargazers) |
| 1 | +<!-- ⚠️ This README has been generated from the file(s) "blueprint.md" ⚠️--> |
| 2 | +<!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! |
| 3 | + !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! |
| 4 | + !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! |
| 5 | + !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! |
| 6 | + !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! |
| 7 | + !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! |
| 8 | + !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! |
| 9 | + !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! |
| 10 | + !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! |
| 11 | + DO NOT EDIT THIS READEME DIRECTLY! Edit "bluesprint.md" instead. |
| 12 | + !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! |
| 13 | + !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! |
| 14 | + !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! |
| 15 | + !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! |
| 16 | + !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! |
| 17 | + !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! |
| 18 | + !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! |
| 19 | + !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! |
| 20 | + !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! --> |
| 21 | +<h1 align="center">@nativescript-community/gesturehandler</h1> |
| 22 | +<p align="center"> |
| 23 | + <a href="https://npmcharts.com/compare/@nativescript-community/gesturehandler?minimal=true"><img alt="Downloads per month" src="https://img.shields.io/npm/dm/@nativescript-community/gesturehandler.svg" height="20"/></a> |
| 24 | +<a href="https://www.npmjs.com/package/@nativescript-community/gesturehandler"><img alt="NPM Version" src="https://img.shields.io/npm/v/@nativescript-community/gesturehandler.svg" height="20"/></a> |
| 25 | + </p> |
5 | 26 |
|
| 27 | +<p align="center"> |
| 28 | + <b>Declarative API exposing platform native touch and gesture system to NativeScript.</b></br> |
| 29 | + <sub><sub> |
| 30 | +</p> |
6 | 31 |
|
7 | | -## Installation |
| 32 | +<br /> |
8 | 33 |
|
9 | | -```shell |
10 | | -tns plugin add @nativescript-community/gesturehandler |
11 | | -``` |
12 | 34 |
|
13 | | -Be sure to run a new build after adding plugins to avoid any issues. |
14 | 35 |
|
15 | | ---- |
| 36 | +[](#table-of-contents) |
16 | 37 |
|
17 | | -This is a port of [react-native-gesturehandler](https://kmagiera.github.io/react-native-gesture-handler/). |
18 | | -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! |
| 38 | +## Table of Contents |
| 39 | + |
| 40 | +* [Installation](#installation) |
| 41 | +* [API](#api) |
| 42 | + * [TypeScript](#typescript) |
| 43 | +* [GestureRootView](#gesturerootview) |
| 44 | +* [Overriding Nativescript gestures](#overriding-nativescript-gestures) |
| 45 | +* [Credits](#credits) |
| 46 | + * [Examples:](#examples) |
| 47 | +* [Demos and Development](#demos-and-development) |
| 48 | + * [Setup](#setup) |
| 49 | + * [Build](#build) |
| 50 | + * [Demos](#demos) |
| 51 | +* [Questions](#questions) |
| 52 | + |
| 53 | + |
| 54 | +[](#installation) |
19 | 55 |
|
| 56 | +## Installation |
| 57 | +Run the following command from the root of your project: |
| 58 | + |
| 59 | +`ns plugin add @nativescript-community/gesturehandler` |
| 60 | + |
| 61 | + |
| 62 | +[](#api) |
20 | 63 |
|
21 | 64 | ## API |
22 | 65 |
|
@@ -54,3 +97,80 @@ Right now you must not forget to store the ```gestureHandler``` somewhere or the |
54 | 97 |
|
55 | 98 | Now about the API. All the gestures for the react counterpart exist with the same options and the same event ```extraData```. |
56 | 99 |
|
| 100 | + |
| 101 | +[](#gesturerootview) |
| 102 | + |
| 103 | +## GestureRootView |
| 104 | + |
| 105 | +For the gestures to work correctly we need a `root` view which knows how to handle the gestures. |
| 106 | +If using `Page` (thus `Frame`) you don't need to do anything. |
| 107 | +In case you don't (drawer root view, modals, ...) then you can wrap your views in a `GestureRootView` which inherits `GridLayout` |
| 108 | + |
| 109 | + |
| 110 | +[](#overriding-nativescript-gestures) |
| 111 | + |
| 112 | +## Overriding Nativescript gestures |
| 113 | + |
| 114 | +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` |
| 115 | + |
| 116 | +To do that |
| 117 | + |
| 118 | + |
| 119 | +[](#credits) |
| 120 | + |
| 121 | +## Credits |
| 122 | + |
| 123 | +This is a port of [react-native-gesturehandler](https://kmagiera.github.io/react-native-gesture-handler/). |
| 124 | +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! |
| 125 | + |
| 126 | + |
| 127 | + |
| 128 | +### Examples: |
| 129 | + |
| 130 | +- [Basic](demo-snippets/vue/Basic.vue) |
| 131 | + - A basic example showing that overriding N gestures works, even in modals |
| 132 | + |
| 133 | + |
| 134 | +[](#demos-and-development) |
| 135 | + |
| 136 | +## Demos and Development |
| 137 | + |
| 138 | + |
| 139 | +### Setup |
| 140 | + |
| 141 | +To run the demos, you must clone this repo **recursively**. |
| 142 | + |
| 143 | +``` |
| 144 | +git clone https://github.com/@nativescript-community/gesturehandler.git --recursive |
| 145 | +``` |
| 146 | + |
| 147 | +**Install Dependencies:** |
| 148 | +```bash |
| 149 | +npm i # or 'yarn install' or 'pnpm install' |
| 150 | +``` |
| 151 | + |
| 152 | +**Interactive Menu:** |
| 153 | + |
| 154 | +To start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`). This will list all of the commonly used scripts. |
| 155 | + |
| 156 | +### Build |
| 157 | + |
| 158 | +```bash |
| 159 | +npm run build |
| 160 | + |
| 161 | +npm run build.angular # or for Angular |
| 162 | +``` |
| 163 | + |
| 164 | +### Demos |
| 165 | + |
| 166 | +```bash |
| 167 | +npm run demo.[ng|react|svelte|vue].[ios|android] |
| 168 | + |
| 169 | +npm run demo.svelte.ios # Example |
| 170 | +``` |
| 171 | + |
| 172 | +[](#questions) |
| 173 | + |
| 174 | +## Questions |
| 175 | + |
| 176 | +If you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord). |
0 commit comments