React native double tap

RN을 하던 도중, 더블탭 구현을 하게 되었다.

html에는 ondbclick 이라는 함수가 있는데, RN에서는 기본적으로 제공되지 않는거 같아서 만들기로 하였다.

DoubleTap.tsx

export default function DoubleTap({children, delay, onPress, doublePress}) {
  let firstPress: boolean = true;
  let lastTime = new Date().getTime();
  let timer: any = false;

  const doubleTap = () => {
    let now = new Date().getTime();
    if (firstPress) {
      firstPress = false;
      timer = setTimeout(() => {
        onPress();
        firstPress = true;
        timer = false;
      }, delay);
      lastTime = now;
    } else {
      let delta = new Date().getTime() - lastTime < delay;
      if (delta) {
        clearTimeout(timer);
        firstPress = true;
        doublePress();
      }
    }
  };

  return <TouchableOpacity onPress={doubleTap}>{children}</TouchableOpacity>;
}

사용

<DoubleTap
    delay={200}
    onPress={() => console.log("onPress")}
    doublePress={() => console.log("doublePress")}>
    <Text>DoubleTap</Text>
 </DoubleTap>