Add onPress on an skia image component or wrap touchable opacity from react native

[pandey21197]

I am trying to make the skia image clickable. I could not find anything in documentation. If i wrap touchable opacity, it gives error.

[wcandillon]

At the moment you need to build something to fit your own needs, tracking the position of object and in the onTouch event check if the touch is within the region. Then you can implement your own logic.
Another idea is to simply overlay Pressable boxes to the Skia object you wish to make touchable

[himrocks33]

@wcandillon I'm attempting to make a line graph that has multiple data points along it displayed as dots on the line graph. I have that part all working it pinches to zoom and the graph looks nice. The issue being is I would like to make those data points along the graph Pressable to display more information about the point. But I cannot find a way to make an object within a canvas pressable. And not really sure how to make this calculation using gesture handler. Any help or advice would be much appreciated. Thanks.

Edit: I was able to figure this out by using Tap() Gesture and using the x,y coordinates to associate to the location of the datapoints on the canvas.

[pandey21197]

@wcandillon i tried something like this:

import React from 'react';
import {Pressable} from 'react-native';
import {Image, useImage} from '@shopify/react-native-skia';
import {Button} from '../../components/atoms/button';

    <Pressable>
      <Image
        image={imagePath}
        x={x}
        y={y}
        width={width}
        height={height}
        fit="contain"
      />
    </Pressable>

But still throws the error.

[wcandillon]

but it would need to be outside the canvas (as an overlay)

[Bayramito]

Something like this maybe

   <MaskedView
        style={{width: "100%", flexDirection: "row", height: "100%"}}
        maskElement={
          <View
            style={{
              // Transparent background because mask is based off alpha channel.
              backgroundColor: "transparent",
              flex: 1,
              justifyContent: "center",
              alignItems: "center",
            }}
          >
            <Text style={[textStyles().fontSize16, textStyles().bold]}>{text}</Text>
          </View>
        }
      >
        <Canvas style={{width, height}}>
          <Rect x={0} y={0} width={width} height={height}>
            <LinearGradient colors={[c1, c2, c3]} start={vec(0, 0)} end={vec(199, 199)} />
          </Rect>
        </Canvas>
      </MaskedView>

width and height are just props btw, and are fixed values from outside of the component

[CavidM]

Text nodes are not supported

[Bayramito]

Carefully copy paste it, especially if you have a “on save” action on your IDE.. and LinearGradient from skia

[AguNnamdi]

import { Pressable, StyleSheet, View } from 'react-native'
import React from 'react'
import { Canvas, Text, Circle, Fill, useFont } from '@shopify/react-native-skia';
import { useTheme } from '../../../components/Theme';
import {Ionicons} from '@expo/vector-icons' 

const SkiaLogin = () => {
  const { colors } = useTheme();
  const size = 256;
  const r = 84
  const fontSize = 32;
  const font = useFont(require("../../../../assets/fonts/AirbnbCereal_W_Bd.otf"), fontSize);
  return (
    <View style={{ flex: 1 }}>
      <Pressable onPress={()=> console.warn('Hello World')} style={{width: '100%', height: '15%'}}>
        <Canvas style={{ width: "100%", height: "80%" }}>
          <Fill color={colors.background2} />
          <Text x={0} y={100} text="Hello World" font={font} />
        </Canvas>
      </Pressable>
    </View>
  );
}

export { SkiaLogin }

const styles = StyleSheet.create({})

[lucaspelloni2]

Hi guys.. I found a workaround here.. depending on the shape type, the onTouchStart checkes wheater the press event is within the desired shape. You need to play with zIndex and order in the method tho :-) But I Hope it helps!

const checkIfWithinShape = (locationX, locationY, shapeProps) => {
    if (shapeProps.type === 'circle') {
      const {cx, cy, r} = shapeProps;
      const distanceSquared = (locationX - cx) ** 2 + (locationY - cy) ** 2;
      return distanceSquared <= r ** 2;
    }

    if (shapeProps.type === 'rect') {
      const {x, y, width, height} = shapeProps;
      return (
        locationX >= x &&
        locationX <= x + width &&
        locationY >= y &&
        locationY <= y + height
      );
    }

    // Add support for other shapes if needed
    return false;
  };

  const rectWidth = 200;
  const rectHeight = 100;
  // Shape properties
  const redCircleProps = {type: 'circle', cx: 300, cy: 200, r: 100};
  const pinkCircleProps = {type: 'circle', cx: 300, cy: 180, r: 50};
  const rectProps = {
    type: 'rect',
    x: 100,
    y: 40,
    width: rectWidth,
    height: rectHeight,
  };

  const handleTouchStart = e => {
    const {locationX, locationY} = e.nativeEvent;

    // Check if the touch coordinates fall within the bounds of the shapes
    if (checkIfWithinShape(locationX, locationY, redCircleProps)) {
      console.log('User pressed on the red circle!');
    } else if (checkIfWithinShape(locationX, locationY, pinkCircleProps)) {
      console.log('User pressed on the pink circle!');
    } else if (checkIfWithinShape(locationX, locationY, rectProps)) {
      console.log('User pressed on the rectangle!');
    }
  };

  return (
    <Canvas
      style={{
        height: svgSize,
        width: svgSize,
        backgroundColor: alpha(0.2, __COLORS.INK),
      }}
      onTouchStart={handleTouchStart}>
      <Circle {...redCircleProps} color="red" />
      <Circle {...pinkCircleProps} color="pink" />
      <Rect {...rectProps} />
      <Text x={10} y={100} font={font} text=" abasbcaa 0  is a text" />
    </Canvas>
  );

[wcandillon]

Is the gesture handler integration helping here: https://shopify.github.io/react-native-skia/docs/animations/reanimated#element-tracking ?