Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6581

How to use setState from useDerivedValue

$
0
0

Im trying to pass translateX.value to parent by setXPos, and im getting an error"Tried to synchronously call function {bound dispatchSetState} from a different thread."I tried using runOnJS(setXPos)(event.translationX), but its too slow, and laggy, for my animation.The only thing that worked was by using interval, with 5ms and its a lot faster than runOnJS, but i am looking for a good solution not a workaround.

    const setShow = promps.setShow;    const setXPos = promps.setXPos;    const translateX = useSharedValue(0);    // useEffect(() => {    //     const intervalId = setInterval(() => {    //       setXPos(translateX.value);    //     }, 5);    //     return () => clearInterval(intervalId);    // }, [translateX.value]);    useDerivedValue(() => {        setXPos(translateX.value);    }, []);    const swipeGestureHandler = useAnimatedGestureHandler<        PanGestureHandlerGestureEvent,        ContexType>({        onStart: (event, context) => {            // console.log('Start - ', event.absoluteX, ', ', event.absoluteY);            context.translateX = translateX.value;            runOnJS(setShow)(true);        },        onActive: (event, context) => {            translateX.value = event.translationX + context.translateX;            // console.log(event.translationX);            // console.log('x:', event.translationX, '  y:', event.translationY);        },        onEnd: (event, context) => {            runOnJS(setShow)(false);            if (Math.abs(translateX.value) <= windowWidth / 3) {                translateX.value = 0;            } else if (translateX.value < 0) {                //left                translateX.value = -windowWidth;                runOnJS(reaction)("reject");            } else if (translateX.value > 0) {                //right                translateX.value = windowWidth;                runOnJS(reaction)("accept");            }        },    });

Viewing all articles
Browse latest Browse all 6581

Latest Images

Trending Articles



Latest Images