Using setState inside useAnimatedGestureHandler

Question

I'm trying to change the state of a variable using the set function of useState inside onEnd event of useAnimatedGestureHandler hook, but the application crashes everytime I try to do that. Does anybody know why and how to fix it?

I have the following code:

const [canTouch, setCanTouch] = useState(true);

const unlockGestureSwipeUp = useAnimatedGestureHandler({
    onStart: () => {},
    onActive: (event) => {
      yUp.value = event.absoluteY;
    },
    onEnd: (event) => {
      if (opacity1.value === 1 && (yUp.value < 600 || event.velocityY < -500)) {
        setCanTouch(false);
        opacity1.value = withDelay(0 * 500, withTiming(0, { duration: 1000 }));
        opacity2.value = withDelay(0 * 500, withTiming(1, { duration: 1000 }));
...

Every time it gets to that setCanTouch(false), the app crashes.

Is there an error message when it crashes? Or in what way does it crash? — Anton, Aug 23 '23 at 10:03
@Anton It doesn't return any error message. By the way, I found that the use of useState on reanimated 2 hooks can cause incompatibilities, so the best way to proceed is to work with useSharedValue instead of useState — JGrima, Aug 23 '23 at 10:11
https://stackoverflow.com/questions/73928255/react-native-reanimated-application-crashs-when-call-setstate-in-callback-with — Ahmed5G, Aug 23 '23 at 18:34

score 1 · Answer 1 · answered Aug 23 '23 at 10:13

1

I found that the use of useState on reanimated 2 hooks can cause incompatibilities, so the best way to proceed is to work with useSharedValue instead of useState.

answered Aug 23 '23 at 10:13

JGrima

21
5

score 0 · Answer 2 · answered Aug 29 '23 at 13:42

0

You should use inside runOnJS like this:

runOnJS(setCanTouch)(false)

answered Aug 29 '23 at 13:42

Enes Yurtsever

16
6

Using setState inside useAnimatedGestureHandler

2 Answers2