title: .setState is not a function in React Native
body: <p>I've looked through many other threads with this same issue, but none seem to have the solution I'm looking for. I followed a tutorial off of YouTube (Fullstack Development is the channel, and it is how to make a game in 28 minutes). My main code looks like this:</p>
  
  <pre><code>import React, { Component } from 'react';
  import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Dimensions,
    Animated,
    Image,
  } from 'react-native';
  
  import Enemy from './app/components/Enemy';
  
  export default class Blox extends Component {
  
    constructor(props){
      super(props);
      this.state = {
        movePlayerVal: new Animated.Value(40),
        playerSide:'left',
        points: 0,
  
        moveEnemyVal: new Animated.Value(0),
        enemyStartposX: 0,
        enemySide: 'left',
        enemySpeed: 4200,
  
        gameOver: false,
  
      };
    }
  
  
    render() {
      return (
        &lt;Image source = {require('./app/img/bg.png')} style={styles.container}&gt;
  
        &lt;View style= {{ flex:1, alignItems: 'center', marginTop: 80 }}&gt;
            &lt;View style={styles.points}&gt;
                &lt;Text style={{ fontWeight: 'bold', fontSize: 40 }}&gt;{this.state.points}&lt;/Text&gt;
            &lt;/View&gt;
        &lt;/View&gt;
  
            &lt;Animated.Image source={require('./app/img/car.png')}
            style = {{
              height:100,
              width:100,
              position:'absolute',
              zIndex:1,
              bottom: 50,
              resizeMode: 'stretch',
              transform: [
                { translateX: this.state.movePlayerVal }
              ]
            }}&gt;&lt;/Animated.Image&gt;
  
            &lt;Enemy enemyImg={require('./app/img/enemy.png')}
            enemyStartposX={this.state.enemyStartposX}
            moveEnemyVal={this.state.moveEnemyVal} /&gt;
  
            &lt;View style={styles.controls}&gt;
                &lt;Text style = {styles.left} onPress={ () =&gt; this.movePlayer('left') }&gt; {'&lt;'} &lt;/Text&gt;
                &lt;Text style={styles.right} onPress={ () =&gt; this.movePlayer('right') }&gt; {'&gt;'} &lt;/Text&gt;
            &lt;/View&gt;
  
        &lt;/Image&gt;
      );
    }
  
    movePlayer(direction) {
  
      //move player right
      if (direction == 'right') {
        this.setState({ playerSide: 'right' }); //issue with setState being used as a function (from lines 78-124)
  
        Animated.spring(
          this.state.movePlayerVal,
          {
            toValue: Dimensions.get('window').width = 140,
            tension: 120,
  
          }
        ).start();
  
      } else if (direction == 'left') {
        this.setState({ playerSide: 'left' });
  
        Animated.spring(
          this.state.movePlayerVal,
          {
            toValue: 40,
            tension: 120,
  
          }
        ).start();
      }
  
    }
  
    componentDidMount() {
      this.animateEnemy();
    }
  
    animateEnemy() {
  
      this.state.moveEnemyVal.setValue(-100);
      var windowH = Dimensions.get('window').height;
  
      //Generate left distance for enemy
      var r = Math.floor(Math.random() * 2) * 1;
  
      if (r == 2) {
        r = 40;
        this.setState({ enemySide: 'left' });
      } else {
        r = Dimensions.get('window').width = 140;
        //Enemy is on the right
        this.setState = ({ enemySide: 'right' });
      }
        this.setState({ enemyStartposX: r });  //issue with this
  
      //Interval to check for collision each 50 ms
      var refreshIntervalId;
      refreshIntervalId = ( () =&gt; {
  
        //Collision logic
  
        //If enemy collides with player and they are on the same side
        //and the enemy has not passed the player safely
        if (this.state.moveEnemyVal._value &gt; windowH - 280 &amp;&amp; this.state.moveEnemyVal._value &lt; windowH -180 &amp;&amp; this.state.playerSide == this.state.enemySide) {
  
          clearInterval(refreshIntervalId)
          this.setState({ gameOver: true });
          this.gameOver();
  
        }
  
      }, 50);
  
      //Increase enemy speed each 20th second
      setInterval ( () =&gt; {
        this.setState({ enemySpeed: this.state.enemySpeed - 50 })
      }, 20000);
  
      //Animate the enemy
      Animated.timing(
        this.state.moveEnemyVal,
        {
          toValue: Dimensions.get('window').height,
          duration: this.state.enemySpeed,
        }
      ).start(event =&gt; {
        //if no enemy collision is detected, restart enemy animation
        if (event.finished &amp;&amp; this.state.gameOver == false) {
            clearInterval(refreshIntervalId);
            this.setState({ points: ++this.state.points });
            this.animateEnemy();
        }
  
      });
  
    }
  
    gameOver() {
      alert('You lost big time!');
    }
  
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      position: 'relative',
      resizeMode: 'cover',
    },
    points: {
        width: 80,
        height: 80,
        backgroundColor: '#fff',
        borderRadius: 100,
        alignItems: 'center',
        justifyContent: 'center',
      },
      controls: {
        alignItems: 'center',
        flexDirection: 'row',
      },
    right: {
      flex: 1,
      color: '#fff',
      margin: 0,
      fontSize: 60,
      fontWeight: 'bold',
      textAlign: 'left'
    },
    left: {
      flex: 1,
      color: '#fff',
      fontSize: 60,
      fontWeight: 'bold',
      textAlign: 'right'
    },
  });
  </code></pre>
  
  <p>I also have an enemy class that looks like this:</p>
  
  <pre><code>import React, { Component } from 'react';
  import {
    AppRegistry,
    StyleSheet,
    Text,
    Animated,
    Image,
  } from 'react-native';
  
  export default class Enemy extends Component {
    render() {
      return (
          &lt;Animated.Image source={this.props.enemyImg}
            style = {{
              height:100,
              width:100,
              position:'absolute',
              resizeMode: 'stretch',
              left: this.props.enemyStartposX,
              transform: [
                { translateY: this.props.moveEnemyVal },
              ]
            }}&gt;&lt;/Animated.Image&gt;
          );
      }
  }
  </code></pre>
  
  <p>I'm running this through Expo XDE, and as I was building it, it worked. However, once I started coding the animation, Expo turned red and said I had an error in line 124 (in App.js), that .setState is not a function, it is an object. I commented it out, and it told me I had the same error in line 78 of my App.js file. Can you tell me what .setState is, and how to potentially fix this error? Thanks.</p>