title: The component for route must be a react component Search : MyScreen
body: <h2>The component for route 'FilmDetail' must be a React Component</h2>
  
  <p>I'm trying to use <code>react-navigation</code> but I can't get it to work. I've tried removing brackets while importing and can still reproduce the error:</p>
  
  <p><strong>Navigaton.js</strong></p>
  
  <pre><code>import React from 'react' 
  import { StyleSheet, Image } from 'react-native';
  import {  createBottomTabNavigator } from '@react-navigation/bottom-tabs'
  import { createStackNavigator } from 'react-navigation-stack'
  import { createAppContainer } from 'react-navigation'
  import Search from '../Components/Search'
  import FilmDetail from '../Components/FilmDetail'
  import Favorites from '../Components/Favorites'
  
  const SearchStackNavigator = createStackNavigator({
    Search: {
      screen: Search,
      navigationOptions: {
        title: 'Rechercher'
      }
    },
    FilmDetail: {
      screen: FilmDetail
    }
  })
  
  const MoviesTabNavigator = createBottomTabNavigator(
    {
      Search: {
        screen: SearchStackNavigator,
        navigationOptions: {
          tabBarIcon: () =&gt; { 
            return &lt;Image
              source={require('../Images/ic_search.png')}
              style={styles.icon}/&gt; 
          }
        }
      },
      Favorites: {
        screen: Favorites,
        navigationOptions: {
          tabBarIcon: () =&gt; {
            return &lt;Image
              source={require('../Images/ic_favorite.png')}
              style={styles.icon}/&gt;
          }
        }
      }
    },
    {
      tabBarOptions: {
        activeBackgroundColor: '#DDDDDD', 
        inactiveBackgroundColor: '#FFFFFF', 
        showLabel: false, 
        showIcon: true 
      }
    }
  )
  
  const styles = StyleSheet.create({
    icon: {
      width: 30,
      height: 30
    }
  })
  
  export default createAppContainer(MoviesTabNavigator)
  
  </code></pre>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>import React from 'react'
  import Navigation from './Navigation/Navigation'
  import { Provider } from 'react-redux'
  import Store from './Store/configureStore'
  
  export default class App extends React.Component {
    render() {
      return (
        &lt;Provider store={Store}&gt;
          &lt;Navigation/&gt;
        &lt;/Provider&gt;
      )
    }
  }
  </code></pre>
  
  <p><strong>FilmDetail.js</strong></p>
  
  <pre><code>
  import React from 'react'
  import { StyleSheet, View, Text, ActivityIndicator, ScrollView, Image, Button ,TouchableOpacity} from 'react-native'
  import   {getImageFromApi} from '../API/TMDBApi'
  import getFilmDetailFromApi  from '../API/TMDBApi'
  
  import moment from 'moment'
  import numeral from 'numeral'
  import { connect } from 'react-redux'
  
  class FilmDetail extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        film: undefined,
        isLoading: true
      }
    }
  
    componentDidMount() {
      getFilmDetailFromApi(this.props.navigation.state.params.idFilm).then(data =&gt; {
        this.setState({
          film: data,
          isLoading: false
        })
      })
    }
  
    componentDidUpdate() {
      console.log("componentDidUpdate : ")
      console.log(this.props.favoritesFilm)
    }
  
    _displayLoading() {
      if (this.state.isLoading) {
        return (
          &lt;View style={styles.loading_container}&gt;
            &lt;ActivityIndicator size='large' /&gt;
          &lt;/View&gt;
        )
      }
    }
  
    _toggleFavorite() {
      const action = { type: "TOGGLE_FAVORITE", value: this.state.film }
      this.props.dispatch(action)
    }
    _displayFavoriteImage() {
      var sourceImage = require('../Images/ic_favorite_border.png')
      if (this.props.favoritesFilm.findIndex(item =&gt; item.id === this.state.film.id) !== -1) {
        // Film dans nos favoris
        sourceImage = require('../Images/ic_favorite.png')
      }
      return (
        &lt;Image
          style={styles.favorite_image}
          source={sourceImage}
        /&gt;
      )
    }
  
    _displayFilm() {
      const { film } = this.state
      if (film != undefined) {
        return (
          &lt;ScrollView style={styles.scrollview_container}&gt;
            &lt;Image
              style={styles.image}
              source={{uri: getImageFromApi(film.backdrop_path)}}
            /&gt;
            &lt;Text style={styles.title_text}&gt;{film.title}&lt;/Text&gt;
        &lt;TouchableOpacity style={styles.favorite_container} onPress={() =&gt; this._toggleFavorite()}&gt;{this._displayFavoriteImage()}&lt;/TouchableOpacity&gt;
            &lt;Text style={styles.description_text}&gt;{film.overview}&lt;/Text&gt;
            &lt;Text style={styles.default_text}&gt;Sorti le {moment(new Date(film.release_date)).format('DD/MM/YYYY')}&lt;/Text&gt;
            &lt;Text style={styles.default_text}&gt;Note : {film.vote_average} / 10&lt;/Text&gt;
            &lt;Text style={styles.default_text}&gt;Nombre de votes : {film.vote_count}&lt;/Text&gt;
            &lt;Text style={styles.default_text}&gt;Budget : {numeral(film.budget).format('0,0[.]00 $')}&lt;/Text&gt;
            &lt;Text style={styles.default_text}&gt;Genre(s) : {film.genres.map(function(genre){
                return genre.name;
              }).join(" / ")}
            &lt;/Text&gt;
            &lt;Text style={styles.default_text}&gt;Companie(s) : {film.production_companies.map(function(company){
                return company.name;
              }).join(" / ")}
            &lt;/Text&gt;
          &lt;/ScrollView&gt;
        )
      }
    }
  
    render() {
      return (
        &lt;View style={styles.main_container}&gt;
          {this._displayLoading()}
          {this._displayFilm()}
        &lt;/View&gt;
      )
    }
  }
  
  const styles = StyleSheet.create({
    main_container: {
      flex: 1
    },
    loading_container: {
      position: 'absolute',
      left: 0,
      right: 0,
      top: 0,
      bottom: 0,
      alignItems: 'center',
      justifyContent: 'center'
    },
    scrollview_container: {
      flex: 1
    },
    image: {
      height: 169,
      margin: 5
    },
    title_text: {
      fontWeight: 'bold',
      fontSize: 35,
      flex: 1,
      flexWrap: 'wrap',
      marginLeft: 5,
      marginRight: 5,
      marginTop: 10,
      marginBottom: 10,
      color: '#000000',
      textAlign: 'center'
    },
    description_text: {
      fontStyle: 'italic',
      color: '#666666',
      margin: 5,
      marginBottom: 15
    },
    default_text: {
      marginLeft: 5,
      marginRight: 5,
      marginTop: 5,
    },favorite_container: {
      alignItems: 'center'
  },favorite_image: {
    width: 40,
    height: 40
  }
  })
  
  const mapStateToProps = (state) =&gt; {
    return {
      favoritesFilm: state.favoritesFilm
    }
  }
  
  export default connect(mapStateToProps)(FilmDetail)
  </code></pre>