Updating shared values through Gestures with Reanimated 3

[gislitg]

Hi there, first of all thanks for all the fantastic work on skia, it's truly remarkable!

I am using the latest releases of RN Skia and Reanimated, and looking at the documentation here https://shopify.github.io/react-native-skia/docs/animations/reanimated it seems that with Reanimated 3 and higher I should be able to use shared values directly in the Canvas to keep everything on the UI thread.
I am using the HelloWorld example: https://shopify.github.io/react-native-skia/docs/animations/reanimated#hello-world and expanding on it with a GestureHandler and an array of Circles.

If I change that example to store the 3 circles in an array of basic Circle types (x, y, r, color) and map through them: {circles.value.map((c, index) => <Circle key={index} cx={c.x} cy={c.y} r={c.r} color={c.color} />)}
the Canvas displays the 3 circles, however if I add a Gesture and try to add a new circle in Gesture.Tap() they don't get rendered on the Canvas. The new array items get logged correctly in the debugger, but the Canvas seems oblivious to the new items.

Am I forgetting something obvious to let the Canvas know that the sharedValue has changed?

Some additional info:

• Using iOS simulator
• Storing the array with useState and adding .runOnJS(true) to Gesture.Tap adds new items correctly but I'd prefer to use the UI thread

Thanks and best regards,
Gisli

[william-candillon]

This example may help you: https://gist.github.com/wcandillon/4ade39497f96a4e2745b57b0cb071d8c
https://github.com/Shopify/react-native-skia/blob/main/example/src/Examples/Stickers/Stickers.tsx

[gislitg]

Thanks for this! Have tried this out and it works well, each object has its own GestureHandler that can be pinched, panned etc. It doesn't quite cover my initial use case though, which is the stickers array itself needs to be dynamic instead of each sticker. Taps or Pans within a Canvas add new items to the array. In the example the stickers array is not mutable or stateful. Is there a way to keep that array in a mutable SharedValue?

[william-candillon]

I would recommend you put the sticker array in a state and that should work nicely

[gislitg]

The state updates need to happen on the JS thread right?

[william-candillon]

correct since adding a new sticker adds elements to the React tree

[gislitg]

Cool, thanks for this! Very helpful 👍