How to resize Canvas content when orientation change?

[paperbunny]

I am drawing a rectangle of a canvas on the edge of the screen in iPad landscape. That looks good on iPad landscape but when I change the orientation, I could not see this rectangle which makes sense as landscape iPad has larger width compared to portrait mode. Wanted to ask what is the recommended way to handle this so that canvas content is not lost when orientation is changed from landscape to portrait?

here is code snippet :

 <View style={{ flex: 1 }}>
      <Canvas style={{ flex: 1 }}>
        <Fill color="red" />
        <Group color="lightblue" >
          <RoundedRect x={900} y={64} width={128} height={128} r={10} />
        </Group>
      </Canvas>
 </View>

[wcandillon]

The best way to handle it is to assign the canvas size to an animation value and make the layout based on the cavans size:

export const Demo = () => {
  const size = useValue({ width: 0, height: 0});
  const rct = useComputedValue(() => {
    const center = vec(size.current.width / 2, size.current.height / 2);
    return rrect(rect(center.x-50, center.y-50, 50, 50), 10, 10);
  }, [size]);
  return (
    <Canvas style={{ flex: 1 }} onSize={size}>
    <Fill color="red" />
    <Group color="lightblue" >
      <RoundedRect rect={rct} color="white" />
    </Group>
  </Canvas>
  );
};

see https://shopify.github.io/react-native-skia/docs/canvas/overview#getting-the-canvas-size