1

I would like to create a scrolling effect with a PanResponder (using a Scrollview is not possible in my specific case). If i decay and try to smooth out the animation on onPanResponderRelease the animation starts to flicker because the offset set in onPanResponderGrant does not take the current running smooth out animation in account. Some has a solution to this problem?

 const panResponder = React.useRef(
    PanResponder.create({
      onMoveShouldSetPanResponder: () => true,
      onPanResponderGrant: (evt, gestureState) => {
        pan.setOffset({
          x: pan.x._value,
          y: pan.y._value,
        });
      },
      onPanResponderMove: (evt, gestureState) =>
        Animated.event([null, {dx: pan.x, dy: pan.y}], {
          useNativeDriver: false,
        }),
      onPanResponderRelease: (evt, {vx, vy}) => {
        pan.flattenOffset();
        let velocity;

        if (vx >= 0) {
          velocity = clamp(vx, 0, 5);
        } else if (vx < 0) {
          velocity = clamp(vx * -1, 0, 5) * -1;
        }

        Animated.decay(pan, {
          velocity: {x: velocity, y: vy},
          deceleration: 0.99,
          useNativeDriver: false,
        }).start();
      },
    }),
  ).current;
Anis D
  • 761
  • 11
  • 25
Fasky OG
  • 11
  • 1

0 Answers0