Error in Reanimated "tried to synchronously call function res from a different thread "

Question

Have some gesture handlers that work fine in the browser but I am getting this error on iOS in my onEnd callback in the useAnimatedGestureHandler hook.

Here is all the code related to the gesture I am trying to add

    const headerHeight = useSharedValue(176)

    const outerStyle = useAnimatedStyle(() => ({
        minHeight: 176,
        maxHeight: 416,
        height: headerHeight.value,
        borderBottomLeftRadius: 20,
        borderBottomRightRadius: 20,
        position: 'relative',
        overflow: 'visible',
        zIndex: 502,
    }))

    const innerStyle = useAnimatedStyle(() => ({
        overflow: 'hidden',
        height: headerHeight.value,
        minHeight: 176,
        maxHeight: 416,
        borderBottomLeftRadius: 20,
        borderBottomRightRadius: 20,
    }))

    
    const resizeHeaderHeight = useAnimatedGestureHandler({
        onStart: () => {},
        onActive: (event) => {
            headerHeight.value = event.absoluteY
        },
        onEnd: () => {
            if(headerHeight.value < 305) {
                headerHeight.value  = withTiming(176, {
                    duration: 500,
                })
                setHeaderExpanded(false)
            } else {
                headerHeight.value  = withTiming(416, {
                    duration: 500,
                })
                setHeaderExpanded(true)
            }   
        },
    })

    return <>
    <PanGestureHandler onGestureEvent={resizeHeaderHeight}>
        <Animated.View style={outerStyle}>
            <Animated.View style={innerStyle}>
                <HeaderComponent
                    expandable={true}
                    hideContentCollapsed={false}
                    onClickExpand={() => {
                        // setHeaderExpanded(!headerExpanded)
                    }}
                    onClickTitle={openMonthPicker}
                >{{
                    title: <Title />,
                    content: <HeaderCalendar />,
                    buttons: [
                        <RefreshButton key='refresh' />,
                        <AssignmentOffersButton key='assignment-offers' navigation={navigation} />,
                        <FiltersButton key='filters' navigation={navigation} />,
                    ],
                }}</HeaderComponent>
                </Animated.View>
            <ExpandButton isExpanded={headerExpanded} onClick={()=> {}} />
            </Animated.View>
        </PanGestureHandler>

        {headerExpanded && <Overlay onClick={() => {
            setHeaderExpanded(!headerExpanded)
        }} />} 
    </>
}

export default observer(Header)

Have tried defining the onEnd as a 'worklet' and using the runOnJs function suggested to solve this but I am not sure I am doing it correctly since I still have the error every time the onEnd runs.

score 7 · Answer 1 · answered Oct 06 '21 at 10:16

I'm sorry for the late response. I think that, as you have already mentioned, the problem lies in not using runOnJS. Basically onStart, onActive and onEnd are full-fledged worklets, i.e. javascript functions that will be executed on the UI Thread. Consequently if you have functions that can only be executed on the javascript thread and need to be launched from a worklet it must always be specified with runOnJS.

To be more concrete, in the onEnd function you should wrap the setHeaderExpanded function like this: runOnJS(setHeaderExpanded)(true) // the boolean value you want to use.

Error in Reanimated "tried to synchronously call function res from a different thread "

1 Answers1