react-native-gesture-handler is failing to detect a double tap gesture

Question

react-native-gesture-handler is failing to detect a double tap gesture

I recently checked out the latest documentation for RNGH here

Struggling with getting the double tap event to trigger, it seems like RNGH only registers events with fewer taps (I modified the numberOfTaps in the const singleTap to 3 and then the doubleTap started working)

I even attempted changing the Exclusive order (no luck)

Tried replicating an older version of RNGH 1.10.3 as shown in this video

https://www.youtube.com/watch?v=nbEmo0zLJjw&list=PLjHsmVtnAr9TWoMAh-3QMiP7bPUqPFuFZ&index=6

But unfortunately, none of these methods seemed to do the trick

Gesture:

  const singleTap = Gesture.Tap().onEnd((_event, success) => {
    if (success) {
      console.log("single tap!");
    }
  });
  const doubleTap = Gesture.Tap()
    .numberOfTaps(2)
    .onEnd((_event, success) => {
      if (success) {
        console.log("double tap!");
      }
    });

  const taps = Gesture.Exclusive(doubleTap, singleTap);

Component:

    <View style={styles.container}>
      <GestureDetector gesture={taps}>
        <Animated.View>
          <ImageBackground
            source={require("./assets/image.jpg")}
            style={styles.image}
          >
            <Image
              source={require("./assets/heart.png")}
              style={[
                styles.image,
                {
                  shadowOffset: { width: 0, height: 20 },
                  shadowOpacity: 0.35,
                  shadowRadius: 35,
                },
              ]}
              resizeMode={"center"}
            />
          </ImageBackground>
        </Animated.View>
      </GestureDetector>
    </View>

javascript react-native expo react-native-gesture-handler

Answer 1

Answer №1

It has been reported that this particular problem is specific to the expo app on iOS devices. Expo developers are aware of this issue and are working on a fix for it in an upcoming update. I am facing the same issue and plan to follow the suggested solution in the meantime.

Answer 2

It has been reported that this particular problem is specific to the expo app on iOS devices. Expo developers are aware of this issue and are working on a fix for it in an upcoming update. I am facing the same issue and plan to follow the suggested solution in the meantime.

Answer 3

Answer №2

I attempted to implement the provided example as well as other sources without success, such as:

I am currently using Expo, but I am uncertain if that is causing any issues. If none of the suggested solutions work for you, you may consider my manual approach to implementing the functionality:

import React, { useCallback, useEffect, useState } from "react";
import { Pressable, StyleSheet } from "react-native";

interface DoubleTapWrapperProps {
  delay?: number;
  children: React.ReactNode;
  onSingleTap: () => void;
  onDoubleTap: () => void;
}

export default function DoubleTapWrapper({
  delay = 300,
  children,
  onSingleTap,
  onDoubleTap,
}: DoubleTapWrapperProps) {
  const [firstPress, setFirstPress] = useState(true);
  const [lastTime, setLastTime] = useState(new Date().getTime());
  const [timer, setTimer] = useState<NodeJS.Timeout | null>(null);

  useEffect(() => {
    return () => {
      timer && clearTimeout(timer);
    };
  });

  const onTap = useCallback(() => {
    const now = new Date().getTime();

    // Single tap
    if (firstPress) {
      setFirstPress(false);

      setTimer(
        setTimeout(() => {
          onSingleTap && onSingleTap();

          setFirstPress(true);
          setTimer(null);
        }, delay)
      );

      setLastTime(now);
    } else {
      // Double tap
      if (now - lastTime < delay) {
        timer && clearTimeout(timer);
        onDoubleTap && onDoubleTap();
        setFirstPress(true);
      }
    }
  }, [firstPress, lastTime, delay, onDoubleTap, onSingleTap, timer]);

  return (
    <Pressable onPress={onTap} style={styles.container}>
      {children}
    </Pressable>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

This functional component is based on an implementation sourced from here. Here's an example of how it can be used:

export default function Example() {
  return (
    <DoubleTapWrapper
      onSingleTap={() => {
        console.log("single");
      }}
      onDoubleTap={() => {
        console.log("double");
      }}
    >
      <View style={styles.container}>
        <Text style={styles.title}>Double tap example</Text>
      </View>
    </DoubleTapWrapper>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  title: {
    fontSize: 20,
    fontWeight: "bold",
  },
});

Answer 4

I attempted to implement the provided example as well as other sources without success, such as:

I am currently using Expo, but I am uncertain if that is causing any issues. If none of the suggested solutions work for you, you may consider my manual approach to implementing the functionality:

import React, { useCallback, useEffect, useState } from "react";
import { Pressable, StyleSheet } from "react-native";

interface DoubleTapWrapperProps {
  delay?: number;
  children: React.ReactNode;
  onSingleTap: () => void;
  onDoubleTap: () => void;
}

export default function DoubleTapWrapper({
  delay = 300,
  children,
  onSingleTap,
  onDoubleTap,
}: DoubleTapWrapperProps) {
  const [firstPress, setFirstPress] = useState(true);
  const [lastTime, setLastTime] = useState(new Date().getTime());
  const [timer, setTimer] = useState<NodeJS.Timeout | null>(null);

  useEffect(() => {
    return () => {
      timer && clearTimeout(timer);
    };
  });

  const onTap = useCallback(() => {
    const now = new Date().getTime();

    // Single tap
    if (firstPress) {
      setFirstPress(false);

      setTimer(
        setTimeout(() => {
          onSingleTap && onSingleTap();

          setFirstPress(true);
          setTimer(null);
        }, delay)
      );

      setLastTime(now);
    } else {
      // Double tap
      if (now - lastTime < delay) {
        timer && clearTimeout(timer);
        onDoubleTap && onDoubleTap();
        setFirstPress(true);
      }
    }
  }, [firstPress, lastTime, delay, onDoubleTap, onSingleTap, timer]);

  return (
    <Pressable onPress={onTap} style={styles.container}>
      {children}
    </Pressable>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

This functional component is based on an implementation sourced from here. Here's an example of how it can be used:

export default function Example() {
  return (
    <DoubleTapWrapper
      onSingleTap={() => {
        console.log("single");
      }}
      onDoubleTap={() => {
        console.log("double");
      }}
    >
      <View style={styles.container}>
        <Text style={styles.title}>Double tap example</Text>
      </View>
    </DoubleTapWrapper>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  title: {
    fontSize: 20,
    fontWeight: "bold",
  },
});

react-native-gesture-handler is failing to detect a double tap gesture

Answer №1

Answer №2

Similar questions

Utilizing a for loop to add div elements

I seem to be struggling with hiding/showing a div element. Can you figure

Having trouble passing data from JavaScript to PHP with AJAX

Is there a way for me to store the message I sent using discord.js in a variable?

Change the height of a division element after a script has been loaded

VueJS not refreshing DOM after AJAX data modification

The issue of useEffect triggering twice is caused by React router redirection

Determine which city is submitted when the form is completed

Is it optimal to count negative indexes in JavaScript arrays towards the total array length?

The nested transclude directive is displaying the inner transcluded content in the incorrect location

Is there a way to display the tooltip at all times in Chart.js version 3.7.1?

Video margins within a webview

How can one easily implement a countdown timer in an Ionic 3 app?

How can I retrieve the height of a div element once its content has been altered in

Exploring the World of Angularjs 2

Struggling to create a web application using parcel-bundler (Java not loading post-compilation)

Struggling with a stuck Bootstrap Navbar during responsive mode?

Exploring nested routes with React Router 4

Once the Ionic platform is prepared, retrieve from the Angular factory

Calculate the character count of every string within an array