TypeError:Undefined is not an object while trying an animation in ReactNative

Question

I only started learning React native a week ago and here i'm trying to add animation to an app that loads films on search from the TMDB api, it works fine, but when trying the animation and after i press the search button it displays and error saying : undefined is not an object (evaluating 'new _reactNativeReanimated.Animated.Value') * components\FilmItem.js:18:17 in constructor
to be honest i searched on the net but i didn't find a similar problem so can anyone help ? here's my code :

ps: the app works perfectly fine before trying the animation, i added the comments ' //>>> ' to the code i added for the animation, also i added some screens
search screen before validating a search
error screen

// 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;

Answer 1

I believe you are not importing your dependencies correctly - make sure you differentiate between default and named exports i.e.

import Animated, { Value } from 'react-native-reanimated'

then you would have e.g.

positionLeft: new Value(Dimensions.get("window").width)

See here for ES6 import syntax.