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.

[tamish-max]

The important thing is that gesture callbacks run as worklets, so they should not depend on React state being “live” unless you explicitly mirror it.

Two patterns work well:

1. Mirror React state into a shared value

const mode = useSharedValue(selectedMode);
useEffect(() => {
  mode.value = selectedMode;
}, [selectedMode]);

Then read mode.value inside onUpdate / onEnd.

2. Recreate the gesture when dependencies change
   If you memoize the gesture with useMemo, include the state you need in the dependency list.

If you need to update React state from the gesture, do the opposite direction with runOnJS:

.onEnd(() => {
  runOnJS(setDragging)(false);
})

So the general rule is: UI thread reads shared values, JS thread owns React state. Mirroring state into shared values is usually the cleanest solution.