3

I'm trying to use Reanimated V2 to create a draggable component for my React Native project.

I have an object that holds x and y coordinates of the offset for the draggable components. I have this object as a shared value.

const offset = useSharedValue({x: 0, y: 0});

I want to animate both of the coordinates on a certain gesture event (e.g. when user releases their finger from the draggable object). I tried the following code:

offset.value = withSpring({x: 0, y: 0});

This causes a type error: Type 'AnimatedValue' is not assignable to type '{x: number, y: number}'.

I also tried the following one:

offset.value = {x: withSpring(0), y: withSpring(0)};

This causes a run time error: animation.callStart is not a function.

I want to use animated shared value transition as opposed to specifying animation inside useAnimatedStyle. In other words, I don't want to do the following:

useAnimatedStyle(() => ({ transform: [{translateX: withSpring(offset.value.x}, ...]});

Is there any way to animated an object shared value with withSpring?

hayata_suenaga
  • 642
  • 1
  • 5
  • 16
  • I am trying to figure this out too. In the meantime, you can define two different variables for your `x` and `y`. E.g. `const offsetX = useSharedValue(0)` and `const offsetY = useSharedValue(0)` – Kipnoedels Oct 08 '22 at 09:55

1 Answers1

0

A worklet is a function that returns a style object that is supplied to the object being animated, that style decides the movement, color, etc. of the object being animated. When you use useAnimatedStyle hook, the anonymous function being passed is taken as a worklet automatically.

I hope this answers your question.

Hammad
  • 1