0

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>
)

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.