question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Delay in TapGestureHandler?

See original GitHub issue

Description

Is there an intentional delay in TapGestureHandler? I notice after about 3 secs the onGestureEvent triggers the next animation.

Code

  const initialScale = useSharedValue(1);
  const changeSize = useSharedValue(0.5);

  const gestureHandler = useAnimatedGestureHandler({
    onStart: () => {
      changeSize.value = initialScale.value === 1 ? 0.5 : 1;
    },
    onCancel: (event) => {
      console.log(event);
    },
    onEnd: () => {
      initialScale.value = withSpring(changeSize.value);
    },
  });

  //... More code

  return (
    <View style={styles.container}>
      <TapGestureHandler onGestureEvent={gestureHandler} numberOfTaps={2}>
        <Animated.View style={animatedPosition}>
          <Animated.View style={[styles.card, animatedScale]} />
        </Animated.View>
      </TapGestureHandler>
    </View>
  );

Example

mobile-ani-test

Package versions

  • React: 16.13.1
  • React Native: 0.63.1
  • React Native Reanimated: 2.0.0-alpha.5
  • React Native Gesture Handler: 1.6.1

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:9 (8 by maintainers)

github_iconTop GitHub Comments

1reaction
Szymon20000commented, Sep 17, 2020

Looks like the problem has been resolved. We will close it for now but feel free to reopen anytime.

1reaction
terrysahaidakcommented, Sep 6, 2020

Could you also try the one from this repo master? if it works, we can close this issue then.

Read more comments on GitHub >

github_iconTop Results From Across the Web

TapGestureHandler | React Native Gesture Handler
A discrete gesture handler that recognizes one or many taps. Tap gestures detect one or more fingers briefly touching the screen.
Read more >
react-native-gesture-handler TapGestureHandler TypeScript ...
This page shows TypeScript code examples of react-native-gesture-handler TapGestureHandler.
Read more >
How do I set the initial offset in a PanGestureHandler from ...
Edit: This works as intended, but has a visible render quirk and also a small delay. import React, { Component } from 'react';...
Read more >
react-native-gesture-handler - npm
TapGestureHandler ; LongPressGestureHandler; PanGestureHandler ... is slightly delay to prevent button from highlighting when you fling).
Read more >
Troubleshooting | React Native Bottom Sheet - GitHub Pages
Pressables / Touchables are not working on Android​. Due to wrapping the content and handle with TapGestureHandler & PanGestureHandler , any gesture interaction ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found