React Native staggering animations on Animated.Image receives TypeError: undefined is not an object (evaluating 'value.getValue')

Question

I'm attempting to stagger two animations in which I have an image that fades into the screen, and then translates down. (I'm animating planting a seed)

The seed is its own component:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Text, View, Image, Animated, StyleSheet } from 'react-native';
import seed from '../images/seed.png';

export default class SeedComponent extends Component {

    state = {
        opacity: new Animated.Value(0),
        movement: new Animated.Value(0)
    }

    componentDidMount() {
        const fadeAnimation = 
        Animated.timing(this.state.opacity, {
            toValue: 1,
            duration: 1000,
            useNativeDriver: true
        });

        const moveAnimation = 
        Animated.timing(this.state.movement, {
            toValue: 100,
            duration: 500,
            useNativeDriver: true
        });

        Animated.stagger(500,[
            fadeAnimation,
            moveAnimation
          ]).start();
    }

    render() {
        const animationStyles = {
            opacity: this.state.fadeAnimation,
            transform: [
              { translateY: this.state.moveAnimation},
            ]
          };
        return (
            <View>
            <Animated.Image source={seed} style={[styles.image, animationStyles]} ></Animated.Image>
            </View>
        );
      }
    }


const styles = StyleSheet.create({
    container: {  
      flex: 1, 
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems:'center'
    },
    image: {
        width:100,
        height:100

    }
  });

that I import in the App.js file.

However, I keep getting the following error:

TypeError: undefined is not an object (evaluating 'value.getValue')

Error

I've already defined values in

state = {
        opacity: new Animated.Value(0),
        movement: new Animated.Value(0)
    }

So I figured that it would be ok to use ComponentDidMount. However, I don't necessarily need to use it. I just want to be able to have multiple animations on a single image sequentially or with staggering.

I suspect that the error may lie with the <Animated.Image> tag but I can't figure out a work around for it.

Answer 1

 const animationStyles = {
            opacity: this.state.fadeAnimation,
            transform: [
              { translateY: this.state.moveAnimation},
            ]
          };

fadeAnimation and moveAnimation are not your animated values. its opacity and movement. Change it to

 const animationStyles = {
                opacity: this.state.opacity,
                transform: [
                  { translateY: this.state.movement},
                ]
              };