useCanvasPress

function useCanvasPress(
   canvas: object, 
   handlers: Iterable<readonly [NodeHandle, () => void]>, 
   options?: CanvasPressOptions): (event: object) => void;

Turn a canvas ref plus a map of handles into a press handler, so a tap dispatches to whichever node was hit instead of to coordinates.

The declarative half of CanvasHandle.hitTest: give it the handles you care about and what to run for each.

const bar = useNode()
const onTouch = useCanvasPress(canvas, [[bar, () => select(bar)]])

<View onStartShouldSetResponder={() => true} onResponderRelease={onTouch}>
  <Canvas ref={canvas}>
    <Rect ref={bar} … />
  </Canvas>
</View>

Only the topmost hit fires, which is what a tap target should do - a handler on a node underneath does not also run. Nodes with no handle are reported in onPress but dispatch to nothing.

Parameters

canvas

current

CanvasHandle | null

handlers

Iterable<readonly [NodeHandle, () => void]>

options?

CanvasPressOptions = {}

Returns

(event: object) => void