Using React Reanimated 3, how can I fix "Error: Reading from `_value` directly is only possible on the UI runtime"?

Question

Following along with the react native reanimated docs here I have this code:

import Animated, { useSharedValue, useAnimatedStyle } from 'react-native-reanimated';

function WobbleExample(props) {
  const rotation = useSharedValue(0);

  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [{ rotateZ: `${rotation.value}deg` }],
    };
  });

  return (
    <>
      <Animated.View style={[styles.box, animatedStyle]} />
      <Button
        title="wobble"
        onPress={() => {
          rotation.value = withRepeat(withTiming(10), 6, true)

        }}
      />
    </>
  );
}

But am getting this in my metro console, and the app is crashing

Error: Reading from `_value` directly is only possible on the UI runtime

This error is located at:
    in AnimatedComponent (at createAnimatedComponent.js:264)
    ...

Any suggestions on how to fix are greatly appreciated!

Bazar

Here is a related discussion: #62871701 To me it looks like you're accessing the value correctly in the hook. Are you sure you correctly installed the babel plugins for 'react-native-reanimiated'? If not, it's not going to generate code that calls your your useAnimatedStyle callback on the correct thread. – Glossary

Answer 1

I'm also getting the same issue but In my case, I'm importing Animated from react-native instead of react-native-reanimated.

import Animated from 'react-native-reanimated';

Awad

Answer 2

This error also happens when trying to pass the animated style to a regular View instead of Animated.View.

Unionism

Answer 3

Similar problem to me, when using the shared value with useAnimationStyle and interpolation.

const animatedStyles = useAnimatedStyle(() => {
    const Y = energyLevel?.value ?? 5.5;
    const bottomScreen = -height + heightOffset * 2;
    const topScreen = height - heightOffset * 2;
    const offsetY = interpolate(Y, [1, 10], [bottomScreen, topScreen]);
    return {
      transform: [{translateY: offsetY}],
    };
  });

but the problem was Animated import:

    import Animated from 'react-native-reanimated';

Eger

Answer 4

I got this error when I had an Animated component wrapped in a ScrollView and the stickyHeaderIndices was trying to make the animated component sticky. For example,

  <ScrollView stickyHeaderIndices={[1]}>
    <Text>Some thing</Text>
    <Animated.View style={animatedStyle}>
        ...
    </Animated.View>
  </ScrollView>

Olnek

Answer 5

I had the exact same issue but in my case it was due to importing Animated form 'react-native' and not 'react-native-reanimated'. Perhaps in your case, trying to set rotation.value outside of a hook is causing this issue.

Caroylncarp

Answer 6

My issue was using the wrong version of Reanimated for which version of Expo I was using. Running npx expo install --fix fixed the issues for me.

Lariat

Answer 7

For me the error is caused by this simple syntax mistake, in the Animated.Image

 // This is Wrong
 // style={{
 //     imageStyle,
 //      width: imageSize, height: imageSize
 // }}
style={[
    imageStyle,
    { width: imageSize, height: imageSize },
]}

Phraseologist