Shader transitions on an Image (on press) with react-native-skia

[HichamELBSI]

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

[HichamELBSI]

Please, if someone can take 30 sec to just redirect me to some documentation that could help me or any other link 🙏🏽 it will be very helpful.

[prathamnemade]

My version of code,

import {
  Canvas,
  Group,
  Image,
  Paint,
  RuntimeShader,
  Shader,
  Skia,
  useImage,
} from "@shopify/react-native-skia";
import { Dimensions, StyleSheet, View } from "react-native";

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 { width, height } = Dimensions.get("window");

export default function App() {
  const image = useImage(require("./assets/background.jpg"));

  if (!image) return null;

  return (
    <View style={styles.container}>
      <Canvas
        style={{
          flex: 1,
          backgroundColor: "#000",
          width: width,
          height: height,
        }}
      >
        <Group
          layer={<RuntimeShader source={GRAYSCALE_SHADER}></RuntimeShader>}
        >
          <Image
            image={image}
            fit={"contain"}
            x={0}
            y={0}
            width={width}
            height={height}
          />
        </Group>
      </Canvas>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

Here's the documentation for learning about RN Skia,
https://shopify.github.io/react-native-skia/docs/image-filters/runtime-shader/

[HichamELBSI]

Thanks for the answer but you are just applying a grayscale shader on the image which is something I'm already doing. I was asking for help regarding this kind of transition animation in order to switch between grayscale and full coloured shader on press on the image.

[wcandillon]

We do support these gltransitions almost out of the box: https://github.com/Shopify/react-native-skia/tree/main/example/src/Examples/Transitions
Here is the tutorial: https://www.youtube.com/watch?v=PzKWpwmmRqM

I hope this helps

[HichamELBSI]

Awesome thanks you @wcandillon !