0

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 ?

1 Answer 1

1

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

Sign up to request clarification or add additional context in comments.

1 Comment

Hey thank you ! I will try that as soon as possible !

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.