title: REACT-NATIVE Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined
body: <p>I'm having the following error &quot;Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
  Check the render method of <code>TitleScreen</code>.&quot;</p>
  <p>I've got the import/export shown here:</p>
  <p>TitleScreen.js</p>
  <pre><code>import React, { Component } from 'react';
  import { StyleSheet, ImageBackground, View, Text, TouchableOpacity } from 'react-native';
  import { AdMobBanner } from 'expo';
  import { Dimensions } from 'react-native';
  
  const screenX = Dimensions.get('window').width;
  const screenY = Dimensions.get('window').height;
  
  export default class TitleScreen extends Component {
      render() {
          return(
              &lt;ImageBackground
                  source={require('../assets/space_background.png')}
                  style={{width: screenX, height: screenY}}
              &gt;
                  &lt;View style={styles.isJustGameContainer}&gt;
                      &lt;Text style={styles.isJustGameText}&gt;Is Just Game&lt;/Text&gt;
                  &lt;/View&gt;
                  &lt;View style={styles.titleContainer}&gt;
                      &lt;Text style={styles.title}&gt;Space Shooter&lt;/Text&gt;
                  &lt;/View&gt;
                  &lt;View style={styles.playerStats}&gt;
                      &lt;Text style={styles.playerStatText}&gt;
                          High Score: {this.props.highScore}
                      &lt;/Text&gt;
                      &lt;Text style={styles.playerStatText}&gt;
                          Enemies Destroyed: {this.props.allEnemiesDestroyed}
                      &lt;/Text&gt;
                      &lt;Text style={styles.playerStatText}&gt;
                          Coins Collected: {this.props.allCoinsCollected}
                      &lt;/Text&gt;
                  &lt;/View&gt;
                  &lt;View style={styles.titleScreenContainer}&gt;
                      &lt;ImageBackground 
                          source={require('../assets/player_large.png')}
                          style={styles.titleImage}
                      &gt;
                      &lt;/ImageBackground&gt;
                      &lt;TouchableOpacity
                          style={styles.buttonContainer}
                          onPress={() =&gt; {
                              this.props.playMenuNavigation();
                              this.props.startGame()
                          }}
                      &gt;
                          &lt;Text style={styles.buttonText}&gt;
                              Start Game
                          &lt;/Text&gt;
                      &lt;/TouchableOpacity&gt;
                      &lt;TouchableOpacity
                          style={styles.buttonContainer}
                          onPress={() =&gt; {
                              this.props.playMenuNavigation();
                              this.props.openControls();
                          }}
                      &gt;
                          &lt;Text style={styles.buttonText}&gt;
                              Controls
                          &lt;/Text&gt;
                      &lt;/TouchableOpacity&gt;
                      &lt;TouchableOpacity
                          style={styles.buttonContainer}
                          onPress={() =&gt; {
                              this.props.playMenuNavigation();
                              this.props.openInfo()
                          }}
                      &gt;
                          &lt;Text&gt;
                              About
                          &lt;/Text&gt;
                      &lt;/TouchableOpacity&gt;
                  &lt;/View&gt;
                  &lt;View style={styles.adMobBanner}&gt;
                      &lt;AdMobBanner
                          bannerSize=&quot;fullBanner&quot;
                          adUnitID=&quot;ca-app-pub-5830175342552944/8024421682&quot;
                          testDeviceID=&quot;EMULATOR&quot;
                      /&gt;
                  &lt;/View&gt;
              &lt;/ImageBackground&gt;
          )
      }
  }
  </code></pre>
  <p>App.js</p>
  <pre><code>import { StyleSheet, Text, View, StatusBar, ImageBackground, AsyncStorage } from 'react-native';
  import Expo from 'expo';
  import { Audio } from 'expo-av';
  import Player from './components/Player.js';
  import { Dimensions } from 'react-native';
  import { GameEngine } from 'react-native-game-engine';
  import GameLogic from './GameLogic.js';
  import TitleScreen from './views/TitleScreen';
  import Info from './views/Info.js';
  import Controls from './views/Controls.js';
  import EndGameScreen from './views/EndGameScreen.js';
  import Config from './config/Config.js';
  import EntitySizes from './config/EntitySizes.js';
  
  export default class App extends PureComponent {
      constructor(props) {
          super(props);
          this.screenX = Dimensions.get('window').width;
          this.screenY = Dimensions.get('window').height;
          this.playerWidth = 50;
          this.menuNavigation = new Audio.Sound();
          this.menuNavigation.loadAsync(require('./assets/sound_bits/menu_navigation.mp3'));
          this.state = {
              // Current Game Stats
              points: 0,
              coinsCollected: 0,
              shotsFired: 0,
              enemiesDestroyed: 0,
              playerHealth: Config.gameDefaults.playerHealth,
  
              // Player Stats
              highScore: 0,
              allEnemiesDestroyed: 0,
              allCoinsCollected: 0,
  
              shotsLeft: Config.gameDefaults.shotsLeft,
              hasGameStarted: false,
              hasGameEnded: false,
              isInfoOpen: false,
              isControlsOpen: false,
              causeOfEnd: '',
          };
      }
      
      componentDidMount = () =&gt; {
          this.GameLogic = new GameLogic(this.setState.bind(this));
          this.readerPlayerStats();
      }
  
      readerPlayerStats = () =&gt; {
          AsyncStorage.multiGet(['highScore', 'allEnemiesDestroyed', 'allCoinsCollected']).then(res =&gt; {
              let tempHighScore = 0;
              let tempAllEnemiesDestroyed = 0;
              let tempAllCoinsCollected = 0;
  
              // highScore
              if (res[0][1] !== null) {
                  tempHighScore = String(res[0][1]);
              }
              // tempAllEnemiesDestroyed
              if (res[1][1] !== null) {
                  tempAllEnemiesDestroyed = String(res[1][1]);
              }
              // tempAllCoinsCollected
              if (res[2][1] !== null) {
                  tempAllCoinsCollected = String(res[2][1]);
              }
  
              this.setState({
                  highScore: tempHighScore,
                  allEnemiesDestroyed: tempAllEnemiesDestroyed,
                  allCoinsCollected: tempAllCoinsCollected,
              })
          });
      }
  
      backToTitleScreen = () =&gt; {
          this.GameLogic.resetGame();
          this.setState({
              hasGameStarted: false,
              hasGameEnded: false,
              isInfoOpen: false,
              isControlsOpen: false,
              points: 0,
              coinsCollected: 0,
              shotsLeft: Config.gameDefaults.shotsLeft,
              playerHealth: Config.gameDefaults.playerHealth,
          });
      }
  
      render() {
          if (this.state.hasGameStarted)
          {
              return (
                  &lt;ImageBackground
                      source={require('./assets/space_background.png')}
                      style={{width: this.screenX, height: this.screenY}}
                  &gt;
                      &lt;GameEngine
                          style={styles.gameContainer}
                          systems={[
                              this.GameLogic.gameLoop,
                              this.GameLogic.movePlayer,
                              this.GameLogic.fireProjectile,
                              this.GameLogic.chanceToSpawnEnemy,
                              this.GameLogic.chanceToSpawnFallingCollectible,
                              this.GameLogic.chanceToSpawnFallingHeart,
                              this.GameLogic.chanceToSpawnAsteroid,
                              this.GameLogic.playAgain,
                          ]}
                          entities={{
                              1: {
                                  name: 'Player',
                                  size: EntitySizes.PLAYER_SIZE,
                                  circle: EntitySizes.PLAYER_CIRCLE,
                                  health: this.state.playerHealth,
                                  position: [this.screenX / 2 - this.playerWidth / 2, this.screenY - 100],
                                  renderer: &lt;Player/&gt;
                              },
                              // @Dev to set static object, make sure entity doesn't have name an is in the visible field
                              // 2: {
                              //     position: [this.screenX / 3 - this.playerWidth / 2, this.screenY - 100],
                              //     renderer: &lt;Projectile/&gt;
                              // }
                          }}
                      &gt;
                          &lt;StatusBar hidden={true}/&gt;
                          &lt;EndGameScreen
                              playMenuNavigation={() =&gt; this.menuNavigation.replayAsync()}
                              points={this.state.points}
                              shotsFired={this.state.shotsFired}
                              enemiesDestroyed={this.state.enemiesDestroyed}
                              hasGameEnded={this.state.hasGameEnded} //@TODO this.state.hasGameEnded
                              playAgain={(value) =&gt; this.GameLogic.setPlayAgain(value)}
                              backToTitleScreen={() =&gt; this.backToTitleScreen()}
                          /&gt;
                      &lt;/GameEngine&gt;
                  &lt;/ImageBackground&gt;
              );
          }
          else if (!this.state.hasGameStarted &amp;&amp; !this.state.isInfoOpen &amp;&amp; !this.state.isControlsOpen) {
              return (
                  &lt;View&gt;
                      &lt;StatusBar hidden={true}/&gt;
                      &lt;TitleScreen
                          playMenuNavigation={() =&gt; this.menuNavigation.replayAsync()}
                          startGame={() =&gt; this.setState({hasGameStarted: true})}
                          openControls={() =&gt; this.setState({isControlsOpen: true})}
                          openInfo={() =&gt; this.setState({isInfoOpen: true})}
                          allCoinsCollected={this.state.allCoinsCollected}
                          allEnemiesDestroyed={this.state.allEnemiesDestroyed}
                          highScore={this.state.highScore}
                      /&gt;
                  &lt;/View&gt;
              );
          }
          else if (!this.state.hasGameStarted &amp;&amp; this.state.isInfoOpen) {
              return (
                  &lt;View&gt;
                      &lt;StatusBar hidden={true}/&gt;
                      &lt;Info
                          closeInfo={() =&gt; this.setState({isInfoOpen: false})}
                          playMenuNavigation={() =&gt; this.menuNavigation.replayAsync()}
                      /&gt;                     
                  &lt;/View&gt;
              )
          }
          else if (!this.state.hasGameStarted &amp;&amp; this.state.isControlsOpen) {
              return(
                  &lt;View&gt;
                      &lt;StatusBar hidden={true}/&gt;
                      &lt;Controls
                          closeControls={() =&gt; this.setState({isControlsOpen: false})}
                          playMenuNavigation={() =&gt; this.menuNavigation.replayAsync()}
                      /&gt;                    
                  &lt;/View&gt;
              )
          }
      }
  }
  </code></pre>
  <p>I've tried changing the import in App.js with <code>import TitleScreen from './views/TitleScreen.js'; </code> but it throws me the same error.</p>