I am looking at how to animate colors in react native and followed this tutorial

All I have done is first run react-native init then replace the code in my App.js with this

import { StyleSheet, View, Text, Animated } from 'react-native';
import React, { Component } from 'react';

export default class App extends Component {

ponentDidMount() {
  this.animatedValue = new Animated.Value(0);
}

ponentDidMount() {
 Animated.timing(this.animatedValue, {
  toValue: 150,
  duration: 1500
}).start();
}

    render() {
    const interpolateColor = this.animatedValue.interpolate({
      inputRange: [0, 150],
      outputRange: ['rgb(0,0,0)', 'rga(51,250,170)']
    });

    const animatedStyle = {
      backgroundColor: interpolateColor
    }
    return (
      <Animated.View style={[{ width: 50, height: 50 }, animatedStyle]} />
    );
}
}

And then run react-native run-android

And now I keep getting TypeError:undefined is not an object(evaluating 'this.animatedValue.interpolate')

I am looking at how to animate colors in react native and followed this tutorial https://codedaily.io/screencasts/8/Animate-Colors-with-React-Native-Interpolate

All I have done is first run react-native init then replace the code in my App.js with this

import { StyleSheet, View, Text, Animated } from 'react-native';
import React, { Component } from 'react';

export default class App extends Component {

ponentDidMount() {
  this.animatedValue = new Animated.Value(0);
}

ponentDidMount() {
 Animated.timing(this.animatedValue, {
  toValue: 150,
  duration: 1500
}).start();
}

    render() {
    const interpolateColor = this.animatedValue.interpolate({
      inputRange: [0, 150],
      outputRange: ['rgb(0,0,0)', 'rga(51,250,170)']
    });

    const animatedStyle = {
      backgroundColor: interpolateColor
    }
    return (
      <Animated.View style={[{ width: 50, height: 50 }, animatedStyle]} />
    );
}
}

And then run react-native run-android

And now I keep getting TypeError:undefined is not an object(evaluating 'this.animatedValue.interpolate')

• javascript
• react-native
• react-animated

Share Improve this question Follow edited Sep 9, 2019 at 11:59 David Schumann 14.8k1313 gold badges8383 silver badges105105 bronze badges asked Feb 8, 2018 at 8:04 rivaldragonrivaldragon 9411 gold badge33 silver badges99 bronze badges 1

• There are a 'ponentDidMount' repeated. – PTT Commented Feb 8, 2018 at 9:00

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

The ponentDidMount lifecycle method only runs after the first render. Therefore this.animatedValue will be undefined when the ponent first mounts.

You can declare the animated value as an instance property on the ponent, so that it will be available from when the ponent is first created.

export default class App extends Component {
  animatedValue = new Animated.Value(0)

  //...
}

Additionally, you can't define multiple ponentDidMount methods as you have here.