PanGestureHandler: Bottom to top resets to bottom and then animates

Question

I have attached the snack for better clarity. I am trying to achieve an animation similar to the iOS/Android notification bar.

I am successfully able to drag the handlebar to the bottom using the below-given code:

const translateY = cond(
  eq(gestureState, State.END),
  [
    cond(
      greaterThan(dragY, 0),
      set(
        dragY,
        runTiming(clockY, dragY, velocityY, 400, gestureState, () => {
          console.log('f1');
        }),
      ),
      set(
        dragY,
        runTiming(clockY, dragY, velocityY, 0, gestureState, () => {
          console.log('f2');
        }),
      ),
    ),
    set(offsetY, dragY),
    dragY,
  ],
  cond(
    eq(gestureState, State.BEGAN),
    [stopClock(clockY), finalDragY],
    finalDragY,
  ),
);

But, while trying to animate it from the bottom, it just snaps the handlebar to the bottom and then animates it to the top. On debugging further, I realized that the translated position resets and then it animates.

Snack

score 0 · Answer 1 · answered Jul 20 '20 at 23:05

I have solved the issue and update the snack with the solution. Basically, there were a couple of issues.

On dragging the handle from top to bottom, the value of translationY would be negative as you are panning in the opposite direction. So, to fix it, I added the negative value with the total height add(400, dragY):
```
    set(
        dragY,
        runTiming(clockY, add(400, dragY), velocityY, 0, gestureState, () => {
          console.log('f2');
        }),
      )
```

The translateY used to reset to the bottom and then start animating. It never used to get updated with the value returned from add(400, dragY). To fix that, I added it to the section where the clock was running and I wanted to capture the position:

  function runTiming(
  clock,
  value,
  velocity,
  dest,
) {
  const state = {
    finished: new Value(0),
    velocity: new Value(0),
    position: new Value(0),
    time: new Value(0),
    frameTime: new Value(0),
  };

  const config = {
    duration: 500,
    toValue: new Value(0),
    easing: Easing.inOut(Easing.ease),
  };

  return [
    cond(
      not(clockRunning(clock)),
      [
        set(state.finished, 0),
        set(state.velocity, velocity),
        set(state.position, value),
        set(config.toValue, dest),
        set(state.time, 0),
        set(state.frameTime, 0),
        startClock(clock),
      ],
      [
        // if the clock is already running we update the value, in case a new value is captured from panning
        set(state.position, value),
      ],
    ),
    timing(clock, state, config),
    cond(state.finished, [
      stopClock(clock),
      // reset animation
      set(state.finished, 0),
      set(config.toValue, 0),
      set(state.time, 0),
      set(state.frameTime, 0),
    ]),
    state.position,
  ];
}

PanGestureHandler: Bottom to top resets to bottom and then animates

1 Answers1