Help, how can i put useSharedValue on uniform?

[leeminh516]

Hello. I'm beginner of react native.

I'm just learning skia from youtube and tutorial says use useValue but it doesn't exist more.

Docs says use useSharedValue directly and it work, but when i try it, useSharedValue cannot be set to uniform variables.

How could i solve it? plz help me...

`import { Canvas, Fill, Shader, Skia, vec } from "@shopify/react-native-skia";
import { useWindowDimensions, View } from "react-native";
import { Gesture, GestureDetector } from "react-native-gesture-handler";
import { useSharedValue } from "react-native-reanimated";

const source = Skia.RuntimeEffect.Make(`
uniform vec4 colors[4];
uniform vec2 center;
uniform vec2 pointer;

    struct Paint {
      vec4 color;
      bool stroke;
      float strokeWidth;
    };



    float sdCircle(vec2 pos, float r) {
      return length(pos) - r;
    }


    float4 draw(float4 color, float d, Paint paint) {
      bool isFill = paint.stroke == false && d < 0;
      bool isStroke = paint.stroke == true && abs(d) <= paint.strokeWidth / 2;

      if(isFill || isStroke){
        return paint.color;
      }
      return color;
    }

    float4 drawCircle(float4 color,vec2 pos, float radius, Paint paint) {
      float d = sdCircle(pos, radius);
      return draw(color, d, paint);
    }



    vec4 main(vec2 pos) {
      float4 color = colors[0];
      color = drawCircle(color, pos -center, center.x, Paint(colors[1], false, 20));
      color = drawCircle(color, pos -pointer, 10, Paint(colors[2], false, 20));
      return color;
    }
`);

export default function Index() {
const { width, height } = useWindowDimensions();
const center = vec(width / 2, height / 2);
const colors = ["#dafb61", "#61DAFB", "#fb61da", "#61fbcf"].map(color => Skia.Color(color));
const pointer = useSharedValue(vec(0,0));
const onTouch = Gesture.Pan().onChange((event) => {
pointer.value = vec(pointer.value.x + event.changeX, pointer.value.y + event.changeY);
});

if (!source) {
throw new Error("Couldn't compile the shader")
}
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>

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

<Shader source={source} uniforms={{ center, colors, pointer }} />




);
}
`

[leeminh516]

i've just solved my self.. use useDerivedValue to make uniforms and pass it to shader(don't use uniforms.value just use uniforms)