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.