0

Is it possible to somehow call setTimeout on UI Thread in react-native-reanimated 2? Or better yet, use lodash's throttle?

Right now calling setTimeout results in Tried to synchronously call function {setTimeout} from a different thread.

Below is a simplified code of what I'm trying to achieve.

const handleSliderDrag = useAnimatedGestureHandler<PanGestureHandlerGestureEvent, { startX: number }>({
    onStart: (_, ctx) => {
        ctx.startX = x.value;
    },

    onActive: (event, ctx) => {
        x.value = ctx.startX + event.translationX;

        setTimeout(() => {
            console.log('hello from timeout');
        }, 200);
    },
});

I need to update the redux state on slider drag, but the call from UI to JS is async, and given many events, the calls stack up quickly.

Edit 1

I've used Date.now as a workaround, so far works ok, not sure how it could backfire.

const handleSliderDrag = useAnimatedGestureHandler<PanGestureHandlerGestureEvent, { startX: number; now: number }>({
    onStart: (_, ctx) => {
        ctx.startX = x.value;
        ctx.now = Date.now();
    },

    onActive: (event, ctx) => {
        x.value = ctx.startX + event.translationX;
        const now = Date.now();

        if (now - ctx.now > 150) {
            ctx.now = now;
            runOnJS(setCurrent)(x.value);
        }
    },

    onEnd: (event, ctx) => {
        x.value = ctx.startX + event.translationX;
        runOnJS(setCurrent)(x.value);
    },
});
Kirill Novikov
  • 2,576
  • 4
  • 20
  • 33
JakePod
  • 1
  • 2

0 Answers0