fix: improve SkiaCameraCanvas layout handling

[therealpurplemana]

What

Wraps the Skia Canvas with a View component to provide better layout control and flexibility. The View handles layout events and styles, while the Canvas receives explicit width/height dimensions.

This fix is a backwards compatible patch for the post Skia 2.20 removal of canvas.onLayout.

Changes

• Added View import from react-native to wrap the Skia Canvas component
• Moved onLayout and style props to the outer View wrapper
• Applied explicit width and height styles to the SkiaProxy.Canvas based on layout measurements
• Merged user-provided styles with { flex: 1 } to maintain backwards compatibility
• Canvas now receives dimensions from parent View instead of handling layout directly

Tested on

• Expo 53 + React 19 + Skia 2.3.10 (with no memory leak on iOS!)

Related issues

• Fixes #3598

---

🤖 Generated with Claude Code

[vercel[bot]]

@therealpurplemana is attempting to deploy a commit to the mrousavy's Team Team on Vercel.

A member of the Team first needs to authorize it.

[gpadova]

Super important PR. Right now, it is not possible so the "useSkiaFrameProcessor" with Skia ˆ2.0.0 in the new arch.

[CanRau]

Yes please 🥹 just got started with vision-camera etc and hit this right away when trying my first frame processor 😅

Maybe it might even be interesting to be able to pass a custom SkiaCameraCanvas into Camera? 🤔

[makamekm]

Could you please approve it? This is very needed. Thanks @therealpurplemana!

[therealpurplemana]

I would encourage more testing with it please before we merge. Can folks please pull the branch and test it locally and share results?

[evertdespiegeleer]

I pulled in your branch and tried it. Seems to work at first sight, the explicit error is also gone!

After 14-ish frames, the video feed freezes. I'm doing nothing at all in the frame processor, just rendering the frame itself. The app's running out of memory, it seems like a memory leak. I suppose that's the issue being talked about here.

  const frameProcessor = useSkiaFrameProcessor((frame) => {
    'worklet';
    frame.render();
  }, [])

[maxximee]

• onLayout

Yes still memory issue. You can get it working at 15 fps with low format (2048), but it will look horrible