Tried to synchronously call function {out} from a different thread.

[sokolovdm]

Description

I'm trying to animate styles according to this guide https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/animations but i see this error

• Make sure to check whether there are similar issues in the repository - Checked, not working
• Make sure 'react-native-reanimated/plugin' is listed in your babel.config.js

`

module.exports = {

    presets: ['module:metro-react-native-babel-preset'],
    plugins: [
        [
            'module-resolver',
            {
                extensions: ['.js', '.jsx', '.ts', '.tsx', '.svg'],
                alias: {
                    '@': './src',
                    '~p': './public',
                },
            },
        ],
        'react-native-reanimated/plugin',
     ],
}

`

• Make sure to clean cache in your project. Depending on your setup this could be done by - Done

Steps to reproduce

`

export const Button = React.memo<ButtonProps & React.PropsWithChildren>(
({
    size = 'm',
    view = 'system',
    isDisable = false,
    isLoading = false,
    isWide = false,
    iconLeft = false,
    icon,
    onClick,
    style,
    children,
}) => {
    const styles = createStyles({
        size,
        view,
        isDisable,
        isLoading,
        isWide,
        iconLeft,
    })
    const opacityRoot = useSharedValue(1)
    const opacityContent = useSharedValue(1)

    useEffect(() => {
        opacityRoot.value = isDisable ? 0.5 : 1
    }, [isDisable])

    useEffect(() => {
        opacityRoot.value = isLoading ? 0 : 1
    }, [isLoading])

    const animatedRootStyles = useAnimatedStyle(() => {
        return {
            opacity: withTiming(opacityRoot.value, {
                duration: ANIMATION_DURATION,
                easing: Easing.out(Easing.exp),
            }),
        }
    }, [])
    const animatedContentStyles = useAnimatedStyle(() => {
        return {
            opacity: withTiming(opacityContent.value, {
                duration: ANIMATION_DURATION,
                easing: Easing.out(Easing.exp),
            }),
        }
    }, [])

    return (
        <Animated.View style={[animatedRootStyles]}>
            <Pressable
                style={{ ...styles.root, ...style }}
                onPress={onClick}
                disabled={isDisable || isLoading}>
                <View style={styles.wrapper}>
                    {isLoading && (
                        <Animated.View
                            style={styles.spinner}
                            exiting={FadeOut.duration(ANIMATION_DURATION)}
                            entering={FadeIn.duration(
                                ANIMATION_DURATION,
                            ).delay(ANIMATION_DURATION)}>
                            <Spinner
                                view={mapViewSpinner[view]}
                                size={'m'}
                            />
                        </Animated.View>
                    )}
                    <Animated.View
                        style={[styles.content, animatedContentStyles]}>
                        <TheText font={'bodyRegular'} style={styles.text}>
                            {children}
                        </TheText>
                        {icon && (
                            <Icon
                                name={`s-20-${icon ?? 'placeholder'}`}
                                style={{ ...styles.text, ...styles.icon }}
                            />
                        )}
                    </Animated.View>
                </View>
            </Pressable>
        </Animated.View>
    )
},
)

`

Snack or a link to a repository

nope

Reanimated version

2.10.0

React Native version

0.70.3

Platforms

iOS

JavaScript runtime

None

Workflow

React Native (without Expo)

Architecture

None

Build type

Debug mode

Device

iOS simulator

Device model

iPhone 13

Acknowledgements

Yes

[rodrigodiasf1984]

Hello I'm having the same problem, https://snack.expo.dev/@rodrigodiasf/bc529b

I´ve created a custom bottom sheet and when the user moves the scroll to hide the state on redux doesn't update this is the tutorial of the bottom sheet: https://www.youtube.com/watch?v=KvRqsRwpwhY&t=1154s

if I use the runOnJs(resetState) I don't get the error but the state doesn't update

how can I update the state on onEnd inside the Gesture.pan ? Thanks

Ps: This is my first time using snack, sorry if it's not correctly done.

[andreaSimonePorceddu]

I'm having a similar issue. I cannot update the state from the onUpdate function

[szydlovsky]

hey @sokolovdm @rodrigodiasf1984 I can't run any of your examples. If you were able to provide any complete examples I could investigate them. Nonetheless, such issues are usually easy to debug: docs troubleshooting page.