How to pause animations in v2 from useEffect? (cancelAnimation does not work)

[andrewdang17]

Say I have a box that I want to be able to move from one end of the screen to the other end based on a hook that returns a value, which I then use in useEffect. My initial thought was to use cancelAnimation but that does not seem to do anything even though it's using the sharedValue that is being used for the withTiming function. Any idea on how to get this to work?

const MovingBox = () => {
  const isActive = useIsActive()

  const translateX = useSharedValue(0)

  const panGesture = useAnimatedGestureHandler({
    onStart: (_event, context) => {
      context.translateX = translateX.value
    },
    onActive: (event, context) => {
        translateX.value = context.translateX + event.translationX
    }
  })

  const translateXStyle = useAnimatedStyle(() => {
    const translateXInterpolated = withTiming(translateX.value, {
      duration: 100,
      easing: Easing.linear,
    })

    return {
      transform: [{ translateX: translateXInterpolated }],
    }
  })

  useEffect(() => {
    if (isActive) {
      translateX.value = 100
    } else {
      cancelAnimation(translateX)
    }
  }, [isActive])

  return peakData.length > 0 ? (
    <>
      <PanGestureHandler onGestureEvent={panGesture} activeOffsetX={[-10, 10]}>
        <Animated.View
          style={[{marginRight: HALF_SCREEN_WIDTH, marginLeft: HALF_SCREEN_WIDTH}, translateXStyle]}
        >

        </Animated.View>
      </PanGestureHandler>
  </>
}

export default Waveform