Gesture.Pan() methods syncing with react state

[Alvi24]

how can i sync Gesture.Pan() methods (onUpdate, onEnd) with react state
so when these methods are called they have the updated react state value

[MatiPl01]

If you reference values from the react state in gesture callback functions, it depends how you create the gesture. If you don't memoize the gesture and just call e.g. Gesture.Pan().onUpdate(...) in your component's body, then the onUpdate callback is re-crated on every re-render, so every time the state changes, it will be re-created with the fresh state value and automatically be up to date.

If you memoize your gesture e.g. with useMemo like this const pan = useMemo(() => Gesture.Pan().onUpdate(...), [...]), then you have to add your state value to the dependency array of the useMemo hook to re-create the gesture on each state update.

If you mean updating react state once the onUpdate callback is called, then you need to either run the entire gesture detection on the JS thread (use .runOnJS(true) on the gesture object like Gesture.Pan().onUpdate(...).runOnJS(true) or schedule the state update part on JS within the onUpdate callback with runOnJS or scheduleOnRN function call.

---

In general, you should avoid synchronizing worklet callbacks with react state when possible, especially in handlers like onUpdate that are frequently updated. It is better to use reanimated Shared Values to store state used in gesture handlers and update it on gesture updates.

You can explain your specific case and I will try to give more suggestions on the valid approach for you.