[android] canvas background color broken

[g4rb4g3]

Description

Hi,

I just upgraded to react-native-skia@2.4.17 and found out that the canvas background color is now black instead of transparent.
I could not get it back to transparent, neither by calling canvas.clear(Skia.Color('transparent')) nor by drawing a transparent rect.

This is what I get using 2.4.17:

Up until 2.4.16 it works fine and looks like this:

I wonder if the disabled test is related to this?
ac07c74#diff-9841f729bd60fbe7af374d1937d32e31945f0a019e7d8749daba03a4a8b8e989R16

React Native Skia Version

2.4.17

React Native Version

0.79.6

Using New Architecture

• Enabled

Steps to Reproduce

check the below code example on 2.4.16 and 2.4.17

Snack, Code Example, Screenshot, or Link to Repository

import { Canvas, type Color, Image, Skia } from '@shopify/react-native-skia';
import { StyleSheet, View } from 'react-native';

type SkiaProps = {
  size?: number;
  path: string;
  fill?: Color;
  fillOpacity?: number;
  scale?: number;
};

export default function App() {
  const size = 60;
  const path =
    'm10 5.98.011.002A6.06 6.06 0 0 1 16 12.055V16h-.003l.002 1.503a.496.496 0 0 1-.496.497h-1.007a.496.496 0 0 1-.496-.496v-5.45a4.058 4.058 0 0 0-3.989-4.072H8.012a.358.358 0 0 0-.377.542l1.344 2.952a.387.387 0 0 1-.624.41L2.008 7l6.347-4.922a.387.387 0 0 1 .624.41L7.635 5.438a.358.358 0 0 0 .377.543H10';

  const image = drawSkiaPath({ path });

  return (
    <View style={styles.container}>
      <Canvas style={{ height: size, width: size }}>
        <Image height={size} width={size} image={image} />
      </Canvas>
    </View>
  );
}

const drawSkiaPath = ({
  size = 60,
  path,
  fill = 'white',
  fillOpacity = 1.0,
  scale = 1.0,
}: SkiaProps) => {
  const surface = Skia.Surface.Make(size, size);

  const paint = Skia.Paint();
  paint.setColor(Skia.Color(fill));
  paint.setAlphaf(fillOpacity);

  const skPath = Skia.Path.MakeFromSVGString(path);

  if (skPath == null) {
    return null;
  }

  if (scale !== 1.0) {
    const matrix = Skia.Matrix();
    matrix.scale(scale, scale);
    skPath.transform(matrix);
  }

  surface?.getCanvas()?.drawPath(skPath, paint);

  return surface?.makeImageSnapshot() ?? null;
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#1778ff',
    padding: 8,
  },
});

[wcandillon]

yes my mistake, a test change made it to the release, will republish today.

[g4rb4g3]

https://github.com/Shopify/react-native-skia/releases/tag/v2.4.18 fixed it, thank you!