title: React native - 'undefined is not an object'?
body: <p>Alright, going off this answer <a href="https://stackoverflow.com/questions/62804518/react-native-this-setstate-is-not-a-function-trying-to-animate-background-co?noredirect=1#comment111066934_62804518">React native - &quot;this.setState is not a function&quot; trying to animate background color?</a> Im just trying to loop fade the background color of a view in React Native.</p>
  <pre><code>export default props =&gt; {
    let [fontsLoaded] = useFonts({
      'Inter-SemiBoldItalic': 'https://rsms.me/inter/font-files/Inter-SemiBoldItalic.otf?v=3.12',
          'SequelSans-RomanDisp' : require('./assets/fonts/SequelSans-RomanDisp.ttf'),
          'SequelSans-BoldDisp' : require('./assets/fonts/SequelSans-BoldDisp.ttf'),
          'SequelSans-BlackDisp' : require('./assets/fonts/SequelSans-BlackDisp.ttf'),
    });
  
  
    //Set states and hooks
    //To change state 'color' - setColor('#ff0000');
    const colors = [&quot;#fff&quot;, &quot;#ff0000&quot;, &quot;#00ff00&quot;, &quot;#0000ff&quot;, &quot;#0077ff&quot;];
    const [color, setColor] = useState(&quot;#fff&quot;);
    const [backgroundColor, setBackgroundColor] = useState(new Animated.Value(0));
    const [time, setTime] = useState(0);
    //const t = colors[randNum(0, colors.length)];
  
    //random num, exclusive
    function randNum(min, max) {
      return Math.floor(min + Math.random() * (max - min));
    }
  
    useEffect(() =&gt; {
      setBackgroundColor(new Animated.Value(0));
    }, []); // this will be only called on initial mounting of component,
    // so you can change this as your requirement maybe move this in a function which will be called,
    // you can't directly call setState/useState in render otherwise it will go in a infinite loop.
  
    useEffect(() =&gt; {
      Animated.timing(backgroundColor, {
        toValue: 100,
        duration: 5000
      }).start();
    }, [backgroundColor]);
  
    var bgColor = this.state.color.interpolate({
      inputRange: [0, 300],
      outputRange: [&quot;rgba(255, 0, 0, 1)&quot;, &quot;rgba(0, 255, 0, 1)&quot;]
    });
  
    useEffect(() =&gt; {
      const interval = setInterval(() =&gt; {
        //setTime(new Date().getMilliseconds());
        setColor(&quot;#ff0000&quot;);
      }, 36000);
      return () =&gt; clearInterval(interval);
    }, []);
  </code></pre>
  <p>With this, everything checks out except <code>var bgColor = this.state.color</code> which creates error</p>
  <blockquote>
  <p>undefined is not an object evaluating ..</p>
  </blockquote>
  <p>I dont understand why this is a problem since I set color to <code>useState('#fff')</code> I want to use <code>color</code> in my Stylesheet as <code>backgroundColor</code>.</p>
  <p>How can I set this properly?</p>