title: react-navigation : undefined navigation props
body: <p>I have a <code>react-navigation</code> router like so:</p>
  
  <pre><code>const RootNavigator = createSwitchNavigator({
    App: createBottomTabNavigator({
      Home: {
        screen: HomeScreenContainer
      },
      Scan: {
        screen: DocumentScanScreenContainer
      },
      // ...
    }, {
      tabBarOptions: {
        showLabel: false,
        // ...
      }
    })
  })
  </code></pre>
  
  <p>The <code>HomeScreenContainer</code> and <code>DocumentScanScreenContainer</code> are required because <code>react-navigation</code> accepts only <code>React.Component</code>, and my <code>HomeScreen</code> and <code>DocumentScanScreen</code> components are Redux components and importing them directly makes <code>react-navigation</code> throwing error.</p>
  
  <p><code>HomeScreenContainer</code> and <code>DocumentScanScreenContainer</code> are similar, so here is the <code>DocumentScanScreenContainer</code>:</p>
  
  <pre><code>import React from 'react'
  import PropTypes from 'prop-types'
  
  import DocumentScanScreen from '../../screens/DocumentScanScreen'
  
  export default class DocumentScanScreenContainer extends React.Component {
    static propTypes = {
      navigation: PropTypes.shape.isRequired
    }
  
    render() {
      const { navigation } = this.props
  
      // Passing the navigation object to the screen so that you can call
      // this.props.navigation.navigate() from the screen.
      return (
        &lt;DocumentScanScreen navigation={navigation} /&gt;
      )
    }
  }
  </code></pre>
  
  <p>And finally a short version of the <code>DocumentScanScreen</code>:</p>
  
  <pre><code>import React from 'react'
  import { connect } from 'react-redux'
  import PropTypes from 'prop-types'
  
  class DocumentScanScreen extends React.Component {
    static propTypes = {
      token: PropTypes.string,
      navigation: PropTypes.shape.isRequired
    }
  
    componentDidMount() {
      const { token, navigation } = this.props
      if (token === undefined || token === null || token === 0) {
        navigation.navigate('Authentication')
      }
    }
  
    // ...
  }
  </code></pre>
  
  <p>I have warnings at each levels stating that <code>navigation</code> is undefined, so it's like my <code>DocumentScanScreenContainer</code> isn't receiving the <code>navigation</code> prop from the router :</p>
  
  <blockquote>
    <p>Warning: Failed prop type: DocumentScanScreenContainer: prop type <code>navigation</code> is invalid; it must be a function, usually from the <code>prop-types</code> package, but received <code>undefined</code>.</p>
  </blockquote>
  
  <p>Am I doing it wrong or is there a way to pass, from the router, the <code>navigation</code> prop to the <code>DocumentScanScreenContainer</code> ?</p>