cannot read property of View & ScrollView while Wrapping component with R-N-animated

Question

Im trying to implement someone code with my code and while implementing the code, I getting error about Animated.View and Animated.Scrollview is... I have already added react-native-animated library. you can see below code.. one thing I observered that this error popup while wrapping components in react-native-animated...

Error :

TypeError: Cannot read property 'ScrollView' of undefined

TypeError: Cannot read property 'View' of undefined

Basically Im making module called reveal on scrollview

App.js

import React, { useRef, useEffect } from 'react';
import {StyleSheet, Text, View, ScrollView, } from "react-native";
import {
  Animated, useSharedValue, useAnimatedScrollHandler,
  useAnimatedStyle, withTiming, Easing, 
} from 'react-native-reanimated';

export default function App() {
  const translateY = useSharedValue(0);
  const lastContentOffset = useSharedValue(0);
  const isScrolling = useSharedValue(false);

  const scrollHandler = useAnimatedScrollHandler({
    onScroll: (event) => {
      if (
        lastContentOffset.value > event.contentOffset.y &&
        isScrolling.value
      ) {
        console.log("checking scrllong up");
      } else if (
        lastContentOffset.value < event.contentOffset.y &&
        isScrolling.value
      ) {
        console.log("checking scroilling down");
      }
      lastContentOffset.value = event.contentOffset.y;
    },
    onBeginDrag: (e) => {
      isScrolling.value = true.valueOf;
    },
    onEndDrag: (e) => {
      isScrolling.value = false;
    }
  });


  return (
    <View style={styles.container}>
      <Animated.ScrollView style={styles.scrollView} onScroll={scrollHandler} >
        <Text style={styles.text}>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptas
          like or deslike and comment me
        </Text>
      </Animated.ScrollView>
      <View style={styles.action}>
        <Text style={styles.actionItem}>Comment</Text>
        <Text style={styles.actionItem}>Like</Text>
        <Text style={styles.actionItem}>Dislike</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  scrollView: {
    marginHorizontal: 20,
  },
  text: {
    fontSize: 30,
  },
  action: {
    flexDirection: "row",
    borderWidth: 1,
    borderRadius: 25,
    padding: 15,
    position: "absolute",
    bottom: 5,
    backgroundColor: "#000",
    width: "50%",
    justifyContent: "space-around",
  },
  actionItem: {
    color: "#fff",
  },
});

Answer 1

Your import of Animated is incorrect. It should be

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