paint property doesnt work in drawAsImage

[antonkarytski]

Description

When rendering multiple shapes inside drawAsImage that each use their own SkPaint (no difference if they are separately created / shared or cloned), only the first shape receives the paint styling. The rest shapes either not rendered at all or rendered without paing applied. Setting color/stroke props directly on shapes works as expected.

React Native Skia Version

2.3.7

React Native Version

0.78.3

Using New Architecture

• [x] Enabled

Steps to Reproduce

call drawAsImage with 2 or more shapes styled with SkPaint

Snack, Code Example, Screenshot, or Link to Repository

Code (works as expected) ✅:

function draw1() {
  return drawAsImage(
    <Group>
      <Circle
        r={30}
        cx={50}
        cy={50}
        color={'red'}
        strokeWidth={5}
        style={'stroke'}
      />
      <Circle
        r={30}
        cx={60}
        cy={60}
        color={'red'}
        strokeWidth={5}
        style={'stroke'}
      />
    </Group>,
    {
      width: 150,
      height: 150,
    }
  )
}

result:

Code ❌:

function draw2() {
  const paint = Skia.Paint()
  paint.setStyle(PaintStyle.Stroke)
  paint.setColor(Skia.Color('red'))
  paint.setStrokeWidth(5)

  return drawAsImage(
    <Group>
      <Circle r={30} cx={50} cy={50} paint={paint} />
      <Circle r={30} cx={60} cy={60} paint={paint} />
    </Group>,
    {
      width: 150,
      height: 150,
    }
  )
}

Note: there is no difference if we clone paint for each shape, or if we create own paint for the second circle