Swipeable hit Threshold

[vishva-shukla]

Hi, I want the icon to go from 50% to 100% when swipe reach to Threshold. Is there any event to know when swipe hit the Threshold. I don't want to perform animation just increase and decrease size of icon according to threshold

For example

[Jakegillingham5]

Did you manage to find a solution?

[vishva-shukla]

not yet

[garrytaulu]

I would love to know this as well to help achieve a more native feel to the gesture. On iOS when you hit the 50% threshold not only does the text move but the haptics fire to let you know "hey, letting go here means you're committing to the action".

This would help a lot with the mental model of our users when they use the swipe gesture.

[kmagiera]

Hi all. I am not sure what an exact issue here is. I'd recommend however taking a look at examples of using gesture handler with reanimated. With reanimated you can use even callbacks to monitor and react to any kind of conditions i.e. get current progress and take some action when it crosses certain threshold; you should also be able to fire haptic direct from reanimated event callback

[Ronuhz]

Has this been added? I would also want to play a haptic when the Threshold is hit so the user will know that the action will happen .

[aldensully]

@Ronuhz this is how im doing it

const panGesture = Gesture.Pan()
    .onUpdate((e) => {
      if (offsetX.value < threshold) {
        if (hasReachedThreshold.value === false) {
          runOnJS(Haptics.impactAsync)(Haptics.ImpactFeedbackStyle.Medium);
          hasReachedThreshold.value = true;
        }
      } else {
        hasReachedThreshold.value = false;
      }
      offsetX.value = e.translationX + startX.value;
    })

[Ronuhz]

@aldensully

Okay, I'm currently using the Swipeable component cause it doesn't conflict with ScrollView. I knew how to make it from scratch with the PanGestureHandler but not with the GestureDetector, so I would appreciate if you could lighten me up. Thanks

[aldensully]

@Ronuhz i made a lil repo with the component files if you wanna see how im doing it. lmk if you have questions https://github.com/aldensully/swipeable-list

[Ronuhz]

@aldensully Thank you. The repo helped a lot.

[Ronuhz]

@aldensully your solution regarding the hit threshold works perfectly but now I'm having the problem that I can no longer use the scroll view to scroll through the items, neither with the scroll view from react native nor from react native gesture handler.

[aldensully]

@Ronuhz I had the same issue, playing with the values for activeOffsetX([-20, 20]) on the Gesture fixed the issue for me. Though I didnt test this on android.