Tried to synchronously call function error

[Cetger]

Hi guys,
I'm learning reanimated library by following tutorial. When i try to run codes i got an error.
Let me explain,

import React from 'react';
import { View, Button } from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
  useDerivedValue,
} from 'react-native-reanimated';

export default function AnimatedStyleUpdateExample() {
  const progress = useSharedValue(0)
  const translateX = useDerivedValue(() => {
    return progress.value * 100
  })

  const animatedStyles = useAnimatedStyle(() => {
    return {
      transform: [{ translateX: translateX.value }]
    };
  });

  return (
    <View>
      <Animated.View style={[{ height: 100, width: 100, backgroundColor: "red" }, animatedStyles]} />
      <Button onPress={() => (progress.value = Math.random())} title="Hey" />
    </View>
  );
}

This code is working correctly. When i click button, View is displaying anywhere randomly. But when want to make it by using withTiming it throws an error "tried to synchoronously call function"
<Button onPress={() => (progress.value = withTiming(Math.random()))} title="Hey" />
the only part of code i changed is adding withTiming. Is there any idea?

[piaskowyk]

Hey,
In reanimated we use two threads: JS thread and UI thread. JS Thread is a React native thread where React Native JS code is executed. UI thread is a native platform thread where is created layout etc. To improve performance we execute some JS code on the UI thread, and this function is called worklet. In other words, worklet is a function which can be executed on UI native thread. And what this acting strange and throws you an error: withTiming function is a worklet and you tried to call a worklet on a JS thread.

I recommend you somethings like this:

Code

import React from 'react';
import { View, Button } from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
  useDerivedValue,
} from 'react-native-reanimated';

export default function AnimatedStyleUpdateExample() {
  const progress = useSharedValue(0)
  const translateX = useDerivedValue(() => {
    return progress.value * 100
  })

  const animatedStyles = useAnimatedStyle(() => {
    'worklet'
    return {
      transform: [{ 
        translateX: withTiming(translateX.value) 
      }]
    };
  });

  return (
    <View>
      <Animated.View style={[{ height: 100, width: 100, backgroundColor: "red" }, animatedStyles]} />
      <Button onPress={() => progress.value = Math.random()} title="Hey" />
    </View>
  );
}

[GantMan]

for anyone seeing this and having similar issues in a callback, remember to use runOnJS for your callback.

[akinncar]

I had the same issue and runOnJS solve for me

[amaankulshreshtha]

const AnimatedCharts: React.FC<AnimatedChartsProps> = ({ data }) => {
  const transition = useSharedValue(0);
  const canvasWidth = 300;
  const height = canvasWidth;
  const marginTop = 150;

  const xValues = data.map(values => values.x);
  const yValues = data.map(values => values.y);

  const minX = Math.min(...xValues);
  const maxX = Math.max(...xValues);
  const minY = Math.min(...yValues);
  const maxY = Math.max(...yValues);

  const step = canvasWidth / data.length;

  useEffect(() => {
    transition.value = 1;
  });

  return (
    <SafeAreaView>
      <View style={styles.container}>
        <View style={[styles.yAxis, { height: maxY, top: marginTop - 2 }]}>
          {[...data].reverse().map(({ y }) => {
            return (
              <Text key={y} style={[styles.axisTicks, styles.yAxisTicks]}>
                {y}
              </Text>
            );
          })}
        </View>
        <View style={{ width: canvasWidth, marginTop }}>
          {data.map((point, index) => {
            if (point.y === 0) {
              return null;
            }
            const barHeight = mix(point.y / maxY, 0, height);
            // eslint-disable-next-line react-hooks/rules-of-hooks
            const rStyle = useAnimatedStyle(() => {
              'worklet';
              const currentHeight = barHeight * transition.value;
              const translateY = (barHeight - currentHeight) / 2;

              return {
                transform: [{ translateY: withSpring(translateY) }, { scale: transition.value }]
              };
            });
            return (
              <Animated.View key={point.x} style={[styles.barContainer, { left: index * step, width: step, height: barHeight }, rStyle]}>
                <View style={styles.bar} />
              </Animated.View>
            );
          })}
        </View>
        <View style={[styles.xAxis, { width: canvasWidth }]}>
          {data.map(({ x }) => {
            return (
              <Text key={x} style={[styles.axisTicks, { width: step, paddingHorizontal: step / 2.5 }]}>
                {x}
              </Text>
            );
          })}
        </View>
      </View>
    </SafeAreaView>
  );
};

I am getting the same error in the above code, and I tried the aforementioned solution. Doesn't seem to work.

[LHowlett97]

I am also getting the same error however I have no idea where I would incorporate runOnJS as I am not running any functions. The error is appearing on immediate load.

 const translateX = useSharedValue(0)

    const scrollHandler = useAnimatedScrollHandler((event) => {
        translateX.value = (event.contentOffset.x)
    })

    const rStyle = useAnimatedStyle(() => {

        const width = interpolate(
            translateX.value,
            [0, Dimensions.get('screen').width - 25],
            [Dimensions.get('screen').width / 2 - 25, 0],
        )

        return {
            width: width
        }
    })

    return (
        < View style={styles.container} >
            <View style={styles.buttonContainer}>
                <TouchableOpacity style={[styles.buttonStyle, { paddingLeft: 5 }]} onPress={() => setDisplay(0)}>
                    <AppText style={styles.buttonText}>Cash Focus</AppText>
                    <View style={{ width: '100%', alignItems: 'flex-end' }}>
                        <Animated.View style={[
                            rStyle,
                            {
                                height: 2,
                                marginTop: 10,
                                backgroundColor: display == 0 ? colors.black : colors.white,
                                shadowColor: display == 0 ? colors.black : colors.white,
                                shadowOffset: { width: 0, height: 1 },
                                shadowRadius: 1,
                                shadowOpacity: 0.5,
                            }]} />
                    </View>

[LHowlett97]

The issue was that I cannot use Dimensions.get within the interpolate function. Instead I decalred a variable WIDTH equal to Dimensions.get('screen').width and used this variable.

[nemadep]

@wcandillon , anything on this? Even if i use any of the functions(eg. diffclamp, animatedstyle, etc,) from skia/reanimated it throws me this error.

[yahacom]

in my case reset cache helps me
npx react-native start --reset-cache