Adding gesture-responsive objects dynamically

[jungiebook]

Hello!
I'm currently trying to build a photo editing experience using react-native-skia. The idea is that you would be able to press a button to add rectangles on top of the canvas that you can drag around, pinch zoom, rotate.
I have referenced this video to learn how we can go about doing this: https://www.youtube.com/watch?v=yBuhnVDXekQ&ab_channel=WilliamCandillon

However, one thing that I noticed is that in this tutorial, we are already aware that there will be Picture, HelloSticker, and LocationSticker on the canvas, which means we can hard code things directly.

However, if I were to have a button that adds a new rectangle on screen, I would need to call useValue(Skia.Matrix()) from inside the onPress where we initialize the rectangle component, which, of course, wouldn't work since you are calling a react hook from an onPress. Would it be wiser to implement something like const matrices: SkiaMutableValue<SkMatrix[]> = useValue([]); to maintain an array of sk matrices?

And keeping track of the rectangles themselves, I am currently keeping them in a react state, and not a skia value:
const [rectangles, setRectangles] = useState<IRectangle[]>([]);
To render, I did something like this:
{rectangles.map((rect, index) => ( <Rectangle key={index} color={rect.color} height={rect.height} width={rect.width} x={rect.x} y={rect.y} /> ))}
The above approach works currently.

However, I wanted to see if I could keep them in a useValue - because I thought it could be more performant..?
I've tried to change it to:
initialize:
const rectangles: SkiaMutableValue<IRectangle[]> = useValue([]);
onpress:
rectangles.current = [...rectangles.current, newRectangle];
render:
{rectangles.current.map((rect, index) => ( <Rectangle key={index} color={rect.color} height={rect.height} width={rect.width} x={rect.x} y={rect.y} /> ))}

However, since useValue is not tied to the React lifecycle, this doesn't cause a rerender of the canvas and so no rectangles shows up on the screen. Would there be a way to make this work using useValue to keep track of the rectangles, or is it best to keep track of dynamically added objects using just the React State?

Sorry for the wall of text, thank you!!

[wcandillon]

I'm not sure if this helps but we've updated the example to use the new reanimated integration: https://github.com/Shopify/react-native-skia/tree/sticker/example/src/Examples/Stickers