Touch Events
useTouchHandler
The useTouchHandler
hook handles touches in the Canvas
.
It is meant to be used with values to animate canvas elements.
The useTouchHandler hook provides you with callbacks for single touch events.
To track multiple touches use the useMultiTouchHandler
hook instead - it has
the same API as the single touch hook.
tsx
import {Canvas ,Circle ,useTouchHandler ,useValue ,} from "@shopify/react-native-skia";constMyComponent = () => {constcx =useValue (100);constcy =useValue (100);consttouchHandler =useTouchHandler ({onActive : ({x ,y }) => {cx .current =x ;cy .current =y ;},});return (<Canvas style ={{flex : 1 }}onTouch ={touchHandler }><Circle cx ={cx }cy ={cy }r ={10}color ="red" /></Canvas >);};
tsx
import {Canvas ,Circle ,useTouchHandler ,useValue ,} from "@shopify/react-native-skia";constMyComponent = () => {constcx =useValue (100);constcy =useValue (100);consttouchHandler =useTouchHandler ({onActive : ({x ,y }) => {cx .current =x ;cy .current =y ;},});return (<Canvas style ={{flex : 1 }}onTouch ={touchHandler }><Circle cx ={cx }cy ={cy }r ={10}color ="red" /></Canvas >);};