Skip to content

Instantly share code, notes, and snippets.

@Steellgold
Created March 18, 2024 18:15
Show Gist options
  • Save Steellgold/380592375d28df8954f44a9002ed3b92 to your computer and use it in GitHub Desktop.
Save Steellgold/380592375d28df8954f44a9002ed3b92 to your computer and use it in GitHub Desktop.
Double clickable component (react native)
import type { PropsWithChildren, ReactElement } from "react";
import { useState } from "react";
import { TouchableWithoutFeedback } from "react-native-gesture-handler";
type DoubleClickableViewProps = {
onDoubleClick: () => void;
delay?: number;
} & PropsWithChildren;
export const DoubleClickableView = ({ onDoubleClick, delay = 300, children }: DoubleClickableViewProps): ReactElement => {
const [lastTap, setLastTap] = useState(null);
const handleDoubleTap = (): void => {
const now = Date.now();
if (lastTap && (now - lastTap) < delay) {
onDoubleClick();
} else {
// @ts-ignore
setLastTap(now);
}
};
return (
<TouchableWithoutFeedback onPress={handleDoubleTap}>
{children}
</TouchableWithoutFeedback>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment