animated value with multiple animated values inside

[Miigaarino]

Hello, i am trying to create:

• drag ball to reposition
• collision detection between balls and reposition accordingly while dragging one ball
• release ball on green container to leave the ball there
• release ball on elsewhere to position to center of the view (with collision, withSpring)

To make withSpring work on single element of the array the elements must all be animated values.

I am storing all the ball positions in single shared value with array of {x,y} objects, / [{x,y},{x,y},{x,y},...] /
why withSpring is not working is because element of array is not shared value itself.

Need help on how to store array of animated values in a animated value

I tried to implement with other methods such as storing shared values independently in each Circle components, but that way i don't know other ball positions therefore can not calculate collision, reposition of the other balls.

Feel free to share if you have other suggestions about the implementation or the way of storing shared values in parent component or anything helpful, thanks.

https://snack.expo.dev/@miigaarino/reanimated-array-of-shared-values

341219508_6027298077399005_6562277515185409554_n.mp4