Drawing over an image;

[taurasdub]

Hi, I'm not quite sure if it is possible to achieve with react-native-skia, but I'm trying to implement a function so that user could paint over an image (like in Snapchat or IG and other social medias). I've tried multiple methods but so far I haven't gone anywhere. Could anyone explain me how could I achieve this? (In the code below, user could draw over an image, but as soon as it touches another position in canvas, image renders on top of the path :/). Also, another thing that I don't understand is when I use image's prop "fit="fill"" it doesn't fill the entire canvas when image is being used. Thanks for responses in advance and have a nice day!

const image = useImage(require("./assets/jg.jpg"));

return (
<>

<View style={{ height, width }}>

<Canvas style={{ flex: 8 }}>
{paths.map((p, index) => (
<Path
key={index}
path={p.segments.join(" ")}
strokeWidth={5}
style="stroke"
color={p.color}
>
{image && (

)}

))}


<View style={{ padding: 10, flex: 1, backgroundColor: "#edede9" }}>
<View style={{ flex: 1, flexDirection: "row" }}>
<Animated.View
style={[
{ padding: 10, position: "absolute", width: 60 },
animatedPaletteStyle,
]}
>
{paletteColors.map((c, i) => (
<TouchableOpacity
key={i}
onPress={() => {
setActivePaletteColorIndex(i);
paletteVisible.value = false;
}}
>
<View
style={[
{
backgroundColor: c,
},
styles.paletteColor,
]}
>

))}
</Animated.View>

<TouchableOpacity
onPress={() => {
paletteVisible.value !== true
? (paletteVisible.value = true)
: (paletteVisible.value = false);
}}
>
<Animated.View
style={[
{
backgroundColor: paletteColors[activePaletteColorIndex],
},
styles.swatch,
animatedSwatchStyle,
]}
/>










</>
);

[wcandillon]

This tutorial should explain it nicely hopefully: https://www.youtube.com/watch?v=yBuhnVDXekQ

[dentep]

there was nothing about drawing over the image in this video though..

[AvishkaShyaman]

@dentep did you find any solution?

[taurasdub]

You can check out this question on stackoverflow, these libraries have actually helped me. https://stackoverflow.com/questions/74330630/how-to-draw-over-a-picture-in-react-native