3

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!

Shep Sims
  • 698
  • 9
  • 27
  • Here is a related discussion: https://stackoverflow.com/questions/62871201/react-native-reanimated-not-accepting-rotation-value-in-degrees 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. – Artemis Prime May 26 '23 at 00:33

4 Answers4

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';
Ramūnas Mališauskas
  • 31
  • 3
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';
Sourav Sharma
  • 36
  • 2
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>
Tamlyn
  • 22,122
  • 12
  • 111
  • 127
0

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.

Ilya Stepanov
  • 11
  • 3