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);
},
});