Is it possible to detect a long press on a path?

[sohail-buttr]

Hey folks, I want to start of by saying that I absolutely love this library. Incredible work specially for charts. It's buttery smooth and the examples and tutorials by @wcandillon make it even easier to get set up. Great work <3

I wanted to ask if there was any way to detect long press on a path. I'm using useTouchHandler and I see the TouchHandler type does have a force property but that seems to always be 0. I'll provide some pseudo code below for easier context on what I'm trying to achieve with a long press.

// useGraphTouchHandler hook
export const useGraphTouchHandler = (x: SkiaMutableValue<number>) => {
  const isActive = useValue(false)
  const isMoving = useValue(false)
  const offsetX = useValue(0)
  const onTouch = useTouchHandler({
    onStart: () => {
      isActive.current = true
      void Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy)
    },
    onActive: (pos) => {
      isMoving.current = true
      x.current = clamp(offsetX.current + pos.x, 0, WIDTH)
    },
    onEnd: () => {
      isActive.current = false
      isMoving.current = false
      void Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy)
    },
  })

  return { onTouch, isActive, isMoving }
}

// Path is something like this
<Canvas style={styles.graph} onTouch={onTouch}>
    <Group transform={[{ translateY }]}>
        <Path
            style="stroke"
            path={path}
            strokeWidth={3}
            strokeJoin="round"
            strokeCap="round"
            color={trendColorMapping[trend.current].line}
          />
          <Mask mask={<Path style="fill" path={gradientPath} opacity={gradientTransition} />}>
            <Rect x={0} y={0} width={WIDTH} height={HEIGHT}>
              <LinearGradient
                start={vec(0, 0)}
                end={vec(0, HEIGHT)}
                colors={[trendColorMapping[trend.current].gradient, TRANSPARENT]}
              />
            </Rect>
          </Mask>

          <Rect
            x={x}
            y={-2}
            width={WIDTH}
            height={HEIGHT + 2}
            opacity={opacity}
            color={colors.priceHeader.headerBackgroundColor}
          />
    </Group>
    <Cursor
          x={x}
          y={y}
          strokeColor={trendColorMapping[trend.current].line}
          circleColor={colors.priceHeader.headerBackgroundColor}
          isMoving={isMoving}
        />
</Canvas>

Essentially I only want the cursor to become active (isActive.current = true) when we detect a long touch on the path.

Let me know if you need any other info or if I can contribute in someway.

[wcandillon]

For such a use-case we recommend to use react-native-gesture-handler via reanimated: https://shopify.github.io/react-native-skia/docs/animations/reanimated

[sohail-buttr]

Amazing, thanks for the prompt reply. If anyone was wondering, this is how I got to it:

// Gesture handler
import {
  SkiaMutableValue,
  useSharedValueEffect,
  clamp,
  useValue,
} from '@shopify/react-native-skia'
import * as Haptics from 'expo-haptics'
import { Gesture } from 'react-native-gesture-handler'
import { runOnJS, useSharedValue } from 'react-native-reanimated'

import { WIDTH } from '@buttr-app/utils/chartModel'

const triggerHaptic = (force: Haptics.ImpactFeedbackStyle) => {
  void Haptics.impactAsync(force)
}

export const useGraphTouchHandler = (x: SkiaMutableValue<number>) => {
  const isActive = useValue(false)
  const isMoving = useValue(false)
  const isActiveSV = useSharedValue(false)
  const isMovingSV = useSharedValue(false)
  const xSV = useSharedValue(x.current)

  const clampFunction = (value: number, currentX: number, y: number) => {
    const newX = clamp(value, currentX, y)
    xSV.value = newX
  }

  const dragGesture = Gesture.Pan()
    .activateAfterLongPress(500)
    .onStart(() => {
      isActiveSV.value = true
      runOnJS(triggerHaptic)(Haptics.ImpactFeedbackStyle.Heavy)
    })
    .onUpdate((e) => {
      isMovingSV.value = true
      runOnJS(clampFunction)(e.x, 0, WIDTH)
    })
    .onEnd(() => {
      isActiveSV.value = false
      isMovingSV.value = false
      runOnJS(triggerHaptic)(Haptics.ImpactFeedbackStyle.Heavy)
    })

  useSharedValueEffect(() => {
    x.current = xSV.value
  }, xSV)

  useSharedValueEffect(() => {
    isActive.current = isActiveSV.value
  }, isActiveSV)

  useSharedValueEffect(() => {
    isMoving.current = isMovingSV.value
  }, isMovingSV)

  return { dragGesture, isActive, isMoving }
}

// Component
<GestureDetector gesture={dragGesture}>
        <Canvas style={styles.graph}>
          <Group transform={[{ translateY }]}>
            ...
          </Group>
        </Canvas>
</GestureDetector>