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

[jimgitonga]

below is is my code ,why am i getting that error when i run this code

import React from 'react';
import {View, Animated, ScrollView, StyleSheet} from 'react-native';
import {
  useSharedValue,
  useAnimatedStyle,
  interpolate,
} from 'react-native-reanimated';

const cards = Array.from({length: 10}, (_, index) => ({id: index}));

const Card = ({translateY}) => {
  const threshold = -200;

  const animatedStyle = useAnimatedStyle(() => {
    const opacity = interpolate(
      translateY.value,
      [threshold, 0],
      [1, 0],
      'clamp',
    );
    return {
      opacity,
    };
  });

  return <Animated.View style={[styles.card, animatedStyle]} />;
};

const App = () => {
  const translateY = useSharedValue(0);

  const handleScroll = event => {
    translateY.value = event.nativeEvent.contentOffset.y;
  };

  return (
    <View style={styles.container}>
      <ScrollView onScroll={handleScroll} scrollEventThrottle={16}>
        {cards.map(card => (
          <Card key={card.id} translateY={translateY} />
        ))}
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  card: {
    width: 200,
    height: 200,
    backgroundColor: 'red',
    marginVertical: 20,
  },
});

export default App;

[tomekzaw]

Hey @jimgitonga, you're getting this error because you pass Reanimated animated style to React Native's Animated components which are not Reanimated components. Here's what you need to do:

-import { Animated } from 'react-native';
+import Animated from 'react-native-reanimated';