Question 189575 in React native Question posted in
The official React Native documentation can be found here.

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

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!

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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';
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search