First frame renders transparent canvas

Description

Our app uses a Skia's canvas as a background for the home screen, and the first render always comes through transparent, although there are elements to be rendered.

We have debugged the issue and believe there are 2 places that cause this behaviour: Canvas component supplying children collection in useEffect and missing waitUntilCompleted call to commandBuffer in MetalWindowContext class.

We have attempted to fix it on our end by adding root.render(children) to the memoized creation of SkiaSGRoot inside Canvas component and added a bool flag to present() method to enforce command buffer completion when immediate draw is requested (e.g. from drawRect of the view).

We are happy to open a PR with these fixes, but figured it's a good idea to create a bug first and get a confirmation that it is a real issue and our solution is worth submitting.

React Native Skia Version

1.11.1

React Native Version

0.76.6

Using New Architecture

• Enabled

Steps to Reproduce

1. Add a canvas with some background color to the view
2. Add an element (e.g. a circle) to the canvas
3. Put the canvas onto any screen of the app
4. Navigate to the screen and observe a flash

Snack, Code Example, Screenshot, or Link to Repository

Please have a look at two recordings from iOS Simulator (iPhone 16 Pro, iOS 18.1) where a screen with Canvas as a background opens (following a white flash). In both cases, the Canvas's style set to [StyleSheet.absoluteFill, {backgroundColor: "lime"}] and the first video shows a green flash, which is not present in the second video.

Start by reproducing the first-render flash using the Canvas component on the listed React Native and iOS versions, then inspect its useEffect handling of children and the commandBuffer flow in MetalWindowContext. Compare behavior with the two proposed changes; done means the first canvas render displays its elements without a transparent or background-color flash.