onClick event for Skia components

[ayushbgl]

Hello all

I just got started with React Native Skia and I can already experience its power. It took me less than 15 minutes to create a complex shape it took me more than 5 hours to create the same shapes (rhombuses and triangles) using CSS tricks and transparent borders hack creating more issues down the line.

I have created multiple shapes using the Points and they do not overlap with each other. I need to click on those components/shapes and make them interactive. Is there a functionality to know if a particular shape was clicked or do I need to write down some mathematics to figure out what was clicked? Can I wrap my Skia components with something similar to <TouchableOpacity onClick=...>?

Thanks

[Bayramito]

You can try using onTouchHandler provided by Skia. You have to assign it to your Canvas onTouch event.

  const pressed = useValue(0);
  const onTouch = useTouchHandler({
    onStart: () => {
      runTiming(pressed, 1, {duration: 150});
    },
    onEnd: () => {
      runTiming(pressed, 0, {duration: 150});
      runOnJs(myCallback)();
    },
  });


<Canvas style={{width: width, height: 100, marginVertical: 20}} onTouch={onTouch}>