├── .gitignore
├── .DS_Store
├── package.json
├── LICENSE
├── README.md
└── index.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | ./expo/
3 | 


--------------------------------------------------------------------------------
/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/awshawka/react-native-double-tap/HEAD/.DS_Store


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-native-double-tap",
 3 |   "version": "1.0.1",
 4 |   "description": "A react-native wrapper component which supports both double tap and single tap event detection",
 5 |   "main": "index.js",
 6 |   "dependencies": {},
 7 |   "devDependencies": {},
 8 |   "scripts": {
 9 |     "test": "echo \"Error: no test specified\" && exit 1"
10 |   },
11 |   "repository": {
12 |     "type": "git",
13 |     "url": "git+https://github.com/awshawka/react-native-double-click.git"
14 |   },
15 |   "keywords": [
16 |     "react",
17 |     "native",
18 |     "double",
19 |     "tap",
20 |     "single",
21 |     "twice",
22 |     "once",
23 |     "click",
24 |     "both"
25 |   ],
26 |   "author": "Waseef Shawkat<awshawka12@gmail.com> (http://awshawka.github.io)",
27 |   "license": "MIT",
28 |   "bugs": {
29 |     "url": "https://github.com/awshawka/react-native-double-click/issues"
30 |   },
31 |   "homepage": "https://github.com/awshawka/react-native-double-click#readme"
32 | }
33 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Waseef Shawkat
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # react-native-double-tap
 2 | 
 3 | A wrapper component for React Native which supports both double and single tap. Works on both Android and iOS.
 4 | 
 5 | ## Installation
 6 | 
 7 | - `npm install --save react-native-double-tap`
 8 | 
 9 | ## Usage
10 | 
11 | ```js
12 | export default class App extends React.Component {
13 |   render() {
14 |     return (
15 |       <View>
16 |         <DoubleClick
17 |           singleTap={() => {
18 |             console.log("single tap");
19 |           }}
20 |           doubleTap={() => {
21 |             console.log("double tap");
22 |           }}
23 |           delay={200}
24 |         >
25 |           <Button title="Single or Double Tap" />
26 |         </DoubleClick>
27 |       </View>
28 |     );
29 |   }
30 | }
31 | ```
32 | 
33 | ## Props
34 | 
35 | | Property  | Type     | Default | Description                   |
36 | | --------- | -------- | ------- | ----------------------------- |
37 | | delay     | number   | 200     | Time for delay between taps   |
38 | | singleTap | function | null    | callback for single tap event |
39 | | doubleTap | function | null    | callback for double tap event |
40 | 
41 | ## License
42 | 
43 | MIT
44 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from "react";
 2 | import { TouchableOpacity } from "react-native";
 3 | 
 4 | export default class DoubleTap extends Component {
 5 |   constructor(props) {
 6 |     super(props);
 7 | 
 8 |     // time interval between double clicks
 9 |     this.delayTime = props.delay ? props.delay : 150;
10 |     // bool to check whether user tapped once
11 |     this.firstPress = true;
12 |     // the last time user tapped
13 |     this.lastTime = new Date();
14 |     // a timer is used to run the single tap event
15 |     this.timer = false;
16 |   }
17 | 
18 |   _onTap = () => {
19 |     // get the instance of time when pressed
20 |     let now = new Date().getTime();
21 | 
22 |     if (this.firstPress) {
23 |       // set the flag indicating first press has occured
24 |       this.firstPress = false;
25 | 
26 |       //start a timer --> if a second tap doesnt come in by the delay, trigger singleTap event handler
27 |       this.timer = setTimeout(() => {
28 |         //check if user passed in prop
29 |         this.props.singleTap ? this.props.singleTap() : null;
30 | 
31 |         // reset back to initial state
32 |         this.firstPress = true;
33 |         this.timer = false;
34 |       }, this.delayTime);
35 | 
36 |       // mark the last time of the press
37 |       this.lastTime = now;
38 |     } else {
39 |       //if user pressed immediately again within span of delayTime
40 |       if (now - this.lastTime < this.delayTime) {
41 |         // clear the timeout for the single press
42 |         this.timer && clearTimeout(this.timer);
43 | 
44 |         //check if user passed in prop for double click
45 |         this.props.doubleTap ? this.props.doubleTap() : null;
46 | 
47 |         // reset back to initial state
48 |         this.firstPress = true;
49 |       }
50 |     }
51 |   };
52 | 
53 |   render() {
54 |     return (
55 |       <TouchableOpacity onPress={this._onTap}>
56 |         {this.props.children}
57 |       </TouchableOpacity>
58 |     );
59 |   }
60 | 
61 |   componentWillUnmount() {
62 |     // make sure to clear the timer when unmounting
63 |     this.timer && clearTimeout(this.timer);
64 |   }
65 | }
66 | 


--------------------------------------------------------------------------------