I'm pretty new to react-native-skia, I have a grayscale shader applied on an Image and I would like to apply this kind of transition animation on press to switch between grayscale and full colored picture. Here is the code that I'm using to apply a grayscale effect.
const GRAYSCALE_SHADER = Skia.RuntimeEffect.Make(`
uniform shader image;
half4 main(in vec2 xy)
{
//Grabbing the texture color at the current pixel.
vec4 texColor = image.eval(xy).rgba;
vec3 gray_scale = vec3(dot(vec3(0.5, 0.2, 0.2), texColor.rgb));
// Output to screen
return vec4(gray_scale, texColor.a) ;
}
`)!;
const image = useImage('../path/to/image.png');
return (
<Canvas
style={{ flex: 1 }}
>
<Image
image={image}
fit="cover"
x={0}
y={0}
width={200}
height={200}
>
<RuntimeShader source={GRAYSCALE_SHADER} />
</Image>
</Canvas>
)