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!

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';