use-double-press v1.0.0

use-double-press

A react native hook for enabling both single and double press in native Pressable and Touchable components

Install

yarn add use-double-press

npm install use-double-press

See a copy-pastable hook below

Usage

import React from "react";
import { Pressable } from "react-native";
import usePress from "use-double-press";

const DoublePress = () => {
  const pressHandler = usePress({
    onPress: () => console.log("Single Press"),
    onDoublePress: () => console.log("Double Press"),
    delay: 200,
  });

  return <Pressable onPress={pressHandler}></Pressable>;
};

Props

Raw Hook

JavaScript

export default (props) => {
  const { onDoublePress, onPress, delay } = props;
  const delayTime = delay || 200;
  let pressCount = 0;
  let lastTime = new Date().getTime();
  let timer;
  let now = new Date().getTime();

  return (...args) => {
    if (pressCount === 0) {
      pressCount = 1;

      timer = setTimeout(() => {
        onPress && onPress(...args);
        pressCount = 0;
        timer = undefined;
      }, delayTime);

      lastTime = now;
    } else {
      if (now - lastTime < delayTime) {
        timer && clearTimeout(timer);
        onDoublePress && onDoublePress(...args);
        pressCount = 0;
      }
    }
  };
};

TypeScript

interface Props {
  onPress?: (...args: any[]) => void;
  onDoublePress?: (...args: any[]) => void;
  delay?: number;
}

export default (props: Props): ((...args: any[]) => void) => {
  const delayTime = props.delay ?? 200;
  let pressCount = 0;
  let lastTime = new Date().getTime();
  let timer: NodeJS.Timeout | undefined;
  let now = new Date().getTime();

  return (...args: any[]) => {
    if (pressCount === 0) {
      pressCount = 1;

      timer = setTimeout(() => {
        props.onPress?.(...args);
        pressCount = 0;
        timer = undefined;
      }, delayTime);

      lastTime = now;
    } else {
      if (now - lastTime < delayTime) {
        timer && clearTimeout(timer);
        props.onDoublePress?.(...args);
        pressCount = 0;
      }
    }
  };
};

License

MIT