title: Assert fail - React native
body: <p>i'm really new to react native and i encountered this error: 
  <code>Components\MovieFocusCard.tsx: Assert fail</code>
  <code>Failed building JavaScript bundle.</code>
  when trying to run the app.</p>
  
  <p>i already tried removing &amp; reinstalling node_modules but it didn't help.</p>
  
  <p>i have no clue why this error is showing up and what the error message itself means. So any help is welcome!</p>
  
  <p>Thanks in advance!</p>
  
  <p>this is the error that shows up on the phone: </p>
  
  <p><a href="https://i.stack.imgur.com/aJora.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aJora.png" alt="App Error"></a>
  package.json:</p>
  
  <pre><code>{
    "main": "node_modules/expo/AppEntry.js",
    "scripts": {
      "start": "expo start",
      "android": "expo start --android",
      "ios": "expo start --ios",
      "web": "expo start --web",
      "eject": "expo eject"
    },
    "dependencies": {
      "@expo/vector-icons": "^10.0.0",
      "babel-preset-react-native": "^4.0.0",
      "expo": "^35.0.0",
      "react": "16.8.3",
      "react-dom": "16.8.3",
      "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
      "react-native-gesture-handler": "~1.3.0",
      "react-native-reanimated": "~1.2.0",
      "react-native-screens": "~1.0.0-alpha.23",
      "react-native-paper": "^3.3.0",
      "react-native-web": "^0.11.7",
      "react-navigation": "^4.0.10",
      "react-navigation-material-bottom-tabs": "^2.1.5",
      "react-navigation-stack": "^1.10.3"
    },
    "devDependencies": {
      "@types/react": "^16.9.14",
      "@types/react-native": "^0.57.65",
      "@types/react-navigation": "^3.4.0",
      "babel-preset-expo": "^7.1.0",
      "typescript": "^3.6.3"
    },
    "private": true
  }
  
  </code></pre>
  
  <p>Below the code from the MovieFocusCard component: </p>
  
  <pre><code>import MovieDetails from "../Types/MovieDetails";
  import { NavigationInjectedProps, withNavigation } from "react-navigation";
  import React, { Component } from "react";
  import { View, Text, Button, Image } from "react-native";
  
  type MovieFocusCardProps = {};
  type MovieFocusCardState = {
    movieDetails: MovieDetails;
    loaded: boolean;
  };
  
  class MovieFocusCard extends Component&lt;
    MovieFocusCardProps &amp; NavigationInjectedProps,
    MovieFocusCardState
  &gt; {
    constructor(props: MovieFocusCardProps &amp; NavigationInjectedProps) {
      super(props);
      this.state = {
        movieDetails: null,
        loaded: false
      };
    }
  
    componentDidMount() {
      this.GetMovieDetails(this.props.navigation.getParam("movieId", 0));
    }
  
    GetMovieDetails(id: number) {
      let url: string = "https://api.themoviedb.org/3/movie/";
      let apiKey: string = "?api_key=396734bc8915c8d1569cb4ff49b59c56";
      fetch(url + id + apiKey)
        .then(result =&gt; result.json())
        .then(data =&gt;
          this.setState({
            movieDetails: data,
            loaded: true
          })
        )
        .catch(console.log);
    }
  
    render() {
      let posterUrl: string =
        "https://image.tmdb.org/t/p/w200" + this.state.movieDetails.poster_path;
  
      let rdate = new Date(
        this.state.movieDetails.release_date
      ).toLocaleDateString();
  
      let element;
      this.state.loaded
        ? (element = (
            &lt;View&gt;
              &lt;Text&gt;{this.state.movieDetails.title}&lt;/Text&gt;
              &lt;Image source={{ uri: posterUrl }} /&gt;
              &lt;Text&gt;Release date: {rdate}&lt;/Text&gt;
              &lt;Text&gt;Summary: {this.state.movieDetails.overview}&lt;/Text&gt;
              &lt;Text&gt;Duration: {this.state.movieDetails.runtime} min&lt;/Text&gt;
              &lt;Button
                title="back"
                onPress={() =&gt; {
                  this.props.navigation.goBack();
                }}
              &gt;
                Back
              &lt;/Button&gt;
            &lt;/View&gt;
          ))
        : (element = &lt;Text&gt;Loading&lt;/Text&gt;);
      return { element };
    }
  }
  
  export default withNavigation(MovieFocusCard);
  //export default MovieFocusCard;
  
  </code></pre>
  
  <p>app.tsx code:</p>
  
  <pre><code>import React from "react";
  import { createAppContainer } from "react-navigation";
  import { createStackNavigator } from "react-navigation-stack";
  import { createMaterialBottomTabNavigator } from "react-navigation-material-bottom-tabs";
  import { Ionicons } from "@expo/vector-icons";
  
  import MovieFocusCard from "./Components/MovieFocusCard";
  import MovieHome from "./Components/MovieHome";
  import HomeScreen from "./Components/HomeScreen";
  
  const MovieHomeStack = createStackNavigator({
    Movies: { screen: MovieHome },
    MovieFocusCard: { screen: MovieFocusCard, params: { movieId: Number } }
  });
  
  const SerieHomeStack = createStackNavigator({});
  
  const HomeStack = createStackNavigator({});
  
  const MenuBarBottom = createAppContainer(
    createMaterialBottomTabNavigator(
      {
        Movies: {
          screen: MovieHomeStack,
          navigationOptions: {
            tabBarIcon: ({ tintColor }) =&gt; (
              &lt;Ionicons name="md-videocam" size={26} color={tintColor} /&gt;
            )
          }
        },
        Series: {
          screen: SerieHomeStack,
          navigationOptions: {
            tabBarIcon: ({ tintColor }) =&gt; (
              &lt;Ionicons name="md-tv" size={26} color={tintColor} /&gt;
            )
          }
        },
        Home: {
          screen: HomeStack,
          navigationOptions: {
            tabBarIcon: ({ tintColor }) =&gt; (
              &lt;Ionicons name="md-heart" size={26} color={tintColor} /&gt;
            )
          }
        }
      },
      {
        initialRouteName: "Home",
        activeColor: "#000000",
        inactiveColor: "#9e9e9e",
        barStyle: { backgroundColor: "#ffffff" },
        shifting: false //only shows label when clicked
      }
    )
  );
  
  export default MenuBarBottom;
  
  </code></pre>