I have a react-navigation router like so:
const RootNavigator = createSwitchNavigator({
App: createBottomTabNavigator({
Home: {
screen: HomeScreenContainer
},
Scan: {
screen: DocumentScanScreenContainer
},
// ...
}, {
tabBarOptions: {
showLabel: false,
// ...
}
})
})
The HomeScreenContainer and DocumentScanScreenContainer are required because react-navigation accepts only React.Component, and my HomeScreen and DocumentScanScreen components are Redux components and importing them directly makes react-navigation throwing error.
HomeScreenContainer and DocumentScanScreenContainer are similar, so here is the DocumentScanScreenContainer:
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 (
<DocumentScanScreen navigation={navigation} />
)
}
}
And finally a short version of the DocumentScanScreen:
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')
}
}
// ...
}
I have warnings at each levels stating that navigation is undefined, so it's like my DocumentScanScreenContainer isn't receiving the navigation prop from the router :
Warning: Failed prop type: DocumentScanScreenContainer: prop type
navigationis invalid; it must be a function, usually from theprop-typespackage, but receivedundefined.
Am I doing it wrong or is there a way to pass, from the router, the navigation prop to the DocumentScanScreenContainer ?