React-native-reanimated: [Reanimated 1] The handlebar snaps to bottom and then animates to top using PanGestureHandler and react-native-animated

[rashtay]

Description

0

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.

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.

Have been trying to solve it from the past couple of days and now out ideas. Any help would be much appreciated.

Code

Adding the Snack link here: PanGestureHandler: The handlebar snaps to bottom and then animates to top

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, add(400, dragY), velocityY, 0, gestureState, () => {
          console.log('f2');
        }),
      ),
    ),
    set(offsetY, dragY),
    dragY,
  ],
  cond(
    eq(gestureState, State.BEGAN),
    [stopClock(clockY), finalDragY],
    finalDragY,
  ),
);

Package versions

• React: 16.13.1
• React Native: 0.63.1
• React Native Reanimated: 1.9.0

[rashtay]

I have solved this issue and updated the snack in case anyone has the same use case. Basically, you can slide the handlebar from top to bottom and bottom to top. Didn't find an example that demonstrates such a use case.

Detailed explanation: https://stackoverflow.com/questions/62974819/pangesturehandler-bottom-to-top-resets-to-bottom-and-then-animates/63005030#63005030

[jakub-gonet]

You may also want to check out React native bottom sheet.

[rashtay]

@jakub-gonet Wow! This is brilliant! Wish could have found it sooner. Anyways, learned a lot from the source code. Thank you.

[jakub-gonet]

Forwarding kudos to @osdnk 😛