-
Notifications
You must be signed in to change notification settings - Fork 569
Open
Labels
bugSomething isn't workingSomething isn't working
Description
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,
},
});Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
bugSomething isn't workingSomething isn't working