TypeError: Undefined не является объектом при попытке анимации в ReactNative

Question

Я только начал изучать React native неделю go, и здесь я пытаюсь добавить анимацию в приложение, которое загружает фильмы при поиске из API TMDB, оно работает нормально, но при попытке анимации и после нажатия Появляется кнопка поиска и появляется сообщение об ошибке: undefined is not an object (evaluating 'new _reactNativeReanimated.Animated.Value') * components\FilmItem.js:18:17 in constructor
Если честно, я искал на net, но я не нашел подобной проблемы, так что кто-нибудь может помочь? вот мой код:

ps: приложение отлично работает до того, как попробовать анимацию, я добавил комментарии '//>>>' к коду, который я добавил для анимации, также я добавил несколько экранов
экран поиска перед проверкой поиска
экран ошибок

// Components/FilmItem.js

import React from "react";
import {
  StyleSheet,
  View,
  Text,
  Image,
  TouchableOpacity,
  Dimensions
} from "react-native";
import { getImageFromApi } from "../Api/TMDBApi";
import { Animated } from "react-native-reanimated";

class FilmItem extends React.Component {
    //>>> added the constructor
  constructor(props) {
    super(props);
    this.state = {
      positionLeft: new Animated.Value(Dimensions.get("window").width)
    };
  }
//>>> added the componentDidMount()
  componentDidMount() {
    Animated.spring(
      this.state.positionLeft, {
        toValue: 0
    }).start()
  }

  _displayFavoriteImage() {
    if (this.props.isFilmFavorite) {

      return (
        <Image
          source={require("../images/icons8-heart-filled.png")}
          style={styles.favorite_image}
        />
      );
    }
  }

  render() {
    const film = this.props.film;
    const displayDetailForFilm = this.props.displayDetailForFilm;

    return (
        //>>> encapsulated the Touchable opacity inside a Animated.view with a style 
      <Animated.View style={{ left: this.state.positionLeft }}>
        <TouchableOpacity
          onPress={() => displayDetailForFilm(film.id)}
          style={styles.main_container}
        >
          <Image
            style={styles.image}
            source={{ uri: getImageFromApi(film.poster_path) }}
          />
          <View style={styles.content_container}>
            <View style={styles.header_container}>
              {this._displayFavoriteImage()}
              <Text style={styles.title_text}>{film.title}</Text>
              <Text style={styles.vote_text}>{film.vote_average}/10</Text>
            </View>
            <View style={styles.description_container}>
              <Text style={styles.description_text} numberOfLines={6}>
                {film.overview}
              </Text>
              {/* La propriété numberOfLines permet de couper un texte si celui-ci est trop long, il suffit de définir un nombre maximum de ligne */}
            </View>
            <View style={styles.date_container}>
              <Text style={styles.date_text}>Sorti le {film.release_date}</Text>
            </View>
          </View>
        </TouchableOpacity>
      </Animated.View>
    )
  }
}
const styles = StyleSheet.create({
  main_container: {
    height: 190,
    flexDirection: "row"
  },
  image: {
    width: 120,
    height: 180,
    margin: 5,
    backgroundColor: "gray"
  },
  content_container: {
    flex: 1,
    margin: 5
  },
  header_container: {
    flex: 3,
    flexDirection: "row"
  },
  title_text: {
    fontWeight: "bold",
    fontSize: 20,
    flex: 1,
    flexWrap: "wrap",
    paddingRight: 5
  },
  vote_text: {
    fontWeight: "bold",
    fontSize: 16,
    color: "#666666"
  },
  description_container: {
    flex: 7
  },
  description_text: {
    fontStyle: "italic",
    color: "#666666"
  },
  date_container: {
    flex: 1
  },
  date_text: {
    textAlign: "right",
    fontSize: 14
  },
  favorite_image: {
    width: 25,
    height: 25,
    marginRight: 5
  }
});

export default FilmItem;