How to animate map of paths one by one

[200210qb]

I tried to use an animated value (x in the screenshot below). When x is directly used in end, animation worked but apparently all paths animated simultaneously with the same progress x.

In order to animate the map of paths so one draws after another, I think of to use the animated value to subtract the index of the path. Apparently I cannot do x - index, so I tried x.current - index. However, it appears that x.current stays as 0 when used in the path while console log did show its value varying. I wonder why and how should I do this differently to achieve what I was looking for? Thanks a lot for your help!

[wcandillon]

This is expected, you need to use a computedValue for end that evaluates the expression x.current - index

[200210qb]

Thanks for the suggestion! I created this:

as I don't know how could I pass the index of the map of paths into this computedValue?

But then if I use
end = {computedValue.current - index) again the canvas is not updating at all (unless manual trigger of state change happens)
end = {computedValue - index) resulted in error

Please advise! Thanks again!

[wcandillon]

yes you cannot do end = {computedValue - index), the -index needs to be within the computed value

[200210qb]

Good to know! then pardon my noob question, how do I pass the index of the map into the useComputedValue? Can I do something like end={computedValue(index)}?

I even tried putting the entire map into it but still no animation update.

Thanks!

[200210qb]

@wcandillon any further advice to unblock? still stuck... 😓

[wcandillon]

no it means that you need to access the index value from the computed value. If you are more familiar with the reanimated API, you can use reanimated directly: https://shopify.github.io/react-native-skia/docs/animations/reanimated