CODEWITHSUNDEEP
react-nativereact-navigationreact-props
ZedTuX
ZedTuX

Reputation: 3027

react-navigation : undefined navigation props

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 navigation is invalid; it must be a function, usually from the prop-types package, but received undefined.

Am I doing it wrong or is there a way to pass, from the router, the navigation prop to the DocumentScanScreenContainer ?

Upvotes: 0

Views: 466

Answers (1)

NULL SWEΔT
NULL SWEΔT

Reputation: 2037

Try this:

Scan: {
  screen: (props) => <DocumentScanScreenContainer {...props} />
},

*I'm not sure if this will work but I can't add a comment because I have < 50 rep

Upvotes: 1

Related Questions