How can I center an object inside of a Skia Canvas if I do not know the size of the Skia Canvas?

[vchelaru]

I've read the documentation which states that I should use react-native-reanimated to get the size of the canvas and use that to set the position of my objects. I have attempted to do so with the following code:

const size = useSharedValue({ width: 0, height: 0 });

...
    <Canvas onSize={size} style={{height:200, margin:30, backgroundColor:"purple"}}>
        <Rect x={size.value.width/2 - 50} width={100} height={100} color="lightblue" />
    </Canvas>
...

If I do so, my rectangle is still rendered incorrectly, with its center position appearing at X = 0:

Note that if I make a code change to a .tsx file, the app hot-reloads and the rectangle renders at the correct position. If I reload the app or restart the app, the rectangle once-again renders at the incorrect position.

Also, apologies for the double-post but I searched on StackOverflow and noticed this wasn't discussed there. Also, there was no react-native-skia tag on StackOverflow so I took the opportunity to ask the question and create the tag there:

https://stackoverflow.com/questions/77566361/how-can-i-center-a-rectangle-in-a-canvas-in-react-native-and-skia-react-native

I've included additional details in the StackOverflow question above.

Thanks in advance for any help.

[Eonfuzz]

Not sure if you've solved your problem, but it looks like you're trying to do UI thread data (sharedValue.value) transformations on the JS (React) thread.

You'll want to look at reading and understanding how React Reanimation handles SharedValues and then rewrite how you're handling those transforms. Most likely you'll be looking at useAnimatedReaction or useCalculatedValue calls.

[vchelaru]

I have not solved my problem, and I'm pretty new to React Native so if someone could provide some sample code for me (and any future readers) that would be much appreciated.

[Eonfuzz]

Sure, here's how you can use reanimated hooks to update existing shared values.
You shouuuld be able to do something like this:

  const size = useSharedValue({ width: 0, height: 0 });
  const rectX = useSharedValue(0);

  useAnimatedReaction(
    () => size.value,
    () => {
        rectX.value = size.value.width / 2 - 50;
    }
  );

  <Canvas onSize={size} style={{height:200, margin:30, backgroundColor:"purple"}}>
      <Rect x={rectX} width={100} height={100} color="lightblue" />
  </Canvas>