React Navigation Navigating without the navigation prop

Viewed 3264

So I'm trying to navigating without the navigation prop. Using React-navigation library for react-native. I have been following https://medium.com/@mattehr/react-navigation-easily-navigate-from-anywhere-in-your-app-7919bde4e42a and https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html

However when trying to use navigate I run into errors TypeError: TypeError: Cannot read property 'dispatch' of undefined Even though I'm setting setContainer

NavigationService.js

    import { NavigationActions, DrawerActions } from 'react-navigation'
    import type { NavigationParams, NavigationRoute } from 'react-navigation'

    let _container // eslint-disable-line

    function setContainer(container: Object) {
      _container = container
    }

    function reset(routeName: string, params?: NavigationParams) {
      _container.dispatch(
        NavigationActions.reset({
          index: 0,
          actions: [
            NavigationActions.navigate({
              type: 'Navigation/NAVIGATE',
              routeName,
              params
            })
          ]
        })
      )
    }

    function navigate(routeName: string, params?: NavigationParams) {
      _container.dispatch(
        NavigationActions.navigate({
          type: 'Navigation/NAVIGATE',
          routeName,
          params
        })
      )
    }

    function toggleDrawer() {
      _container.dispatch(DrawerActions.toggleDrawer())
    }

    function navigateDeep(actions: { routeName: string, params?: NavigationParams }[]) {
      _container.dispatch(
        actions.reduceRight(
          (prevAction, action): any =>
            NavigationActions.navigate({
              type: 'Navigation/NAVIGATE',
              routeName: action.routeName,
              params: action.params,
              action: prevAction
            }),
          undefined
        )
      )
    }

    function getCurrentRoute(): NavigationRoute | null {
      if (!_container || !_container.state.nav) {
        return null
      }

      return _container.state.nav.routes[_container.state.nav.index] || null
    }

    export default {
      setContainer,
      navigateDeep,
      navigate,
      toggleDrawer,
      reset,
      getCurrentRoute
    }

index.js

    render() {
      StatusBar.setBarStyle('light-content', true)
      return (
        <Provider store={this.store}>
          <App
            ref={container => {
              NavigationService.setContainer(container)
            }}
          />
        </Provider>
      )
    }

action.js

    import navigator from 'navigators/service'
    import { db, auth } from 'utils/firebase'

    import { ROUTE_HOME, ROUTE_LOGIN } from 'constants/routes'

    export const checkUser = () => dispatch => {
      auth.onAuthStateChanged(user => {
        if (user) {
          navigator.navigate(ROUTE_HOME)
        } else {
          navigator.navigate(ROUTE_LOGIN)
        }
      })
    }

Without pasting all my code into this thread. My app uses the switchNavigator which takes me to login screen or home screen depending on if I'm logged in. for example

    const RootNavigator = createSwitchNavigator(
      {
        AuthCheck: Authorize,
        Authorized: MainStack,
        Unauthorized: AuthStack
      },
      {
        initialRouteName: 'AuthCheck'
      }
    )

Inside AuthCheck I have:

    import React, { Component } from 'react'
    import PropTypes from 'prop-types'
    import { ActivityIndicator, View } from 'react-native'
    import styles from './styles'

    class Authorize extends Component {
      componentDidMount() {
        // check and fetch user
        const { checkUser } = this.props
        checkUser()
      }

      render() {
        return (
          <View style={styles.container}>
            <ActivityIndicator />
          </View>
        )
      }
    }

    Authorize.propTypes = {
      checkUser: PropTypes.func.isRequired
    }

    export default Authorize

When checkUser() is run in AuthCheck I get TypeError: TypeError: Cannot read property 'dispatch' of undefined not sure how to fix this. It appears that _container is undefined even though before I have setup the navigators im calling:

    <App
      ref={container => {
        NavigationService.setContainer(container)
      }}
    />

Hope I explained this well enough any help would be much appreciated.

0 Answers
Related