Using from / exit transitions alongside pan gestures (i.e. modal dismissible with swipe)

[xzilja]

I'm working on a modal component that utalizes moti's animated presence to show and hide it self via spring transitions i.e.

<MotiView from={from} animate={to}  exit={from} >
   {children}
</MotiView>

This works excelent, element animates in and out based on some state logic from "above". I now extended it with this pan gesture logic, idea is that modal is swipable up and down, so user can dismiss it with gesture. You'll see that I need to make some changes to original as well:

  const animationState = useDynamicAnimation(() => to)
  const pan = Gesture.Pan()
    .onChange(({ translationY }) => {
      animationState.animateTo({ translateY: translationY, opacity: 1 })
    })
    .onFinalize(({ translationY, velocityY }) => {
      if (translationY >= 100) {
        runOnJS(toggleModal)()
      } else {
        animationState.animateTo(to)
      }
    })

  return (
    <GestureDetector gesture={pan}>
      <MotiView from={from} state={animationState} exit={from}>
        {children}
      </MotiView>
    </GestureDetector>
  )

All of this also works, however moving modal with gesture feels weird, I think it is due to animateTo using spring to animate between values. I'm trying to figure out how to bypass that so that gesture interactions feel more responsive / natural and only use springs when modal is not "touched" and opened or closed programatically.

[nandorojo]

Try passing transition.type that no-animation (I forget the exact name) when panning

[nandorojo]

Or straight reanimated style might be easier for this part

[xzilja]

Added it to animationState.animateTo({ translateY: translationY, opacity: 1, transition: { type: 'no-animation' } }), however this results in an error of "nextAnimation.onStart is not a function". I am not sure if it is related, but I posted another discussion about this exact error with extra details here (but it was when using 'decay' animations) #313

[xzilja]

type: 'spring' and type: 'timing' are the only ones that work in this context. decay and no-timing throw.