Skip to content

touchable feedback option #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
skibaalex wants to merge 5 commits into
base: master
Choose a base branch
from
Open

touchable feedback option #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d0e4579
Added Touchable Feedback prop
skibaalex Jan 21, 2021
d81d6dc
Update README.md
skibaalex Jan 21, 2021
e8fb59e
removed opacity
skibaalex Jan 21, 2021
e765145
Merge branch 'master' of https://github.com/skibaalex/react-native-do…
skibaalex Jan 21, 2021
f9829b5
+
skibaalex Jan 21, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ export default class App extends React.Component {
console.log("double tap");
}}
delay={200}
feedback={true}
>
<Button title="Single or Double Tap" />
</DoubleClick>
Expand All @@ -37,6 +38,7 @@ export default class App extends React.Component {
| delay | number | 200 | Time for delay between taps |
| singleTap | function | null | callback for single tap event |
| doubleTap | function | null | callback for double tap event |
| Feedback | boolean | true | Feedback on Tap (Opacity) | |

## License

Expand Down
16 changes: 9 additions & 7 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React, { Component } from "react";
import { TouchableOpacity } from "react-native";
import { TouchableOpacity, TouchableWithoutFeedback } from "react-native";

export default class DoubleTap extends Component {
constructor(props) {
super(props);

console.log(props.feedback)
// time interval between double clicks
this.delayTime = props.delay ? props.delay : 150;
// bool to check whether user tapped once
Expand All @@ -13,6 +13,8 @@ export default class DoubleTap extends Component {
this.lastTime = new Date();
// a timer is used to run the single tap event
this.timer = false;
//Display visual feedback on touch
this.feedback = props.feedback ? props.feedback : true
}

_onTap = () => {
Expand Down Expand Up @@ -51,11 +53,11 @@ export default class DoubleTap extends Component {
};

render() {
return (
<TouchableOpacity onPress={this._onTap}>
{this.props.children}
</TouchableOpacity>
);
return (
<TouchableWithoutFeedback onPress={this._onTap}>
{this.props.children}
</TouchableWithoutFeedback>
)
}

componentWillUnmount() {
Expand Down