React native: reset route, back to home page - react-native

Question

My idea is to have 2 navigators:
StackNavigator - Home page, login page, sign up page
DrawerNavigator - pages for logged in users
Now, here's my code:
// App.js
import React, { Component } from 'react'
import { MainNavigator } from './src/components/main/MainNavigator'
import { UserNavigator } from './src/components/user/UserNavigator'
import { createSwitchNavigator, createAppContainer } from 'react-navigation'
export default class App extends Component {
constructor(props) {
super(props)
}
render() {
const Navigator = createAppContainer(
makeRootNavigator(this.state.accessToken)
)
return <Navigator />
}
}
const makeRootNavigator = (isLoggedIn) => {
return createSwitchNavigator(
{
Main: {
screen: MainNavigator
},
User: {
screen: UserNavigator
}
},
{
initialRouteName: isLoggedIn ? "User" : "Main"
}
)
}
Next, my MainNavigator.js:
import { createStackNavigator } from 'react-navigation'
import MainPage from './MainPage'
import LoginPage from './LoginPage'
export const MainNavigator = createStackNavigator({
Main: {
screen: MainPage
},
Login: {
screen: LoginPage
},
},
{
headerMode: 'none',
navigationOptions: {
headerVisible: false,
}
},
{
initialRouteName: "Main"
})
Login page has following relevant code:
export default class LogInPage extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<View style={styles.container}>
<LoginButton
onLoginFinished={
(error, result) => {
if (error) {
console.log("login has error: " + result.error);
} else if (result.isCancelled) {
console.log("login is cancelled.");
} else {
AccessToken.getCurrentAccessToken().then(
(data) => {
console.log(data.accessToken.toString())
this.props.navigation.navigate('User')
}
)
}
}
}
onLogoutFinished={() => console.log("logout.")}
/>
</View>
)
}
}
Now, that works like a charm. It takes me to my UserNavigator, which looks like this:
import { createDrawerNavigator } from 'react-navigation'
import ProfilePage from './ProfilePage'
import {MainNavigator} from '../main/MainNavigator'
export const UserNavigator = createDrawerNavigator({
Profile: {
screen: ProfilePage,
},
MainNavigator: {
screen: MainNavigator
}
},
{
initialRouteName: "Profile"
})
So, once I'm logged in, profile page properly shows up. Now, the problem is following: when I use logout button, it runs onLogoutFinished(), which is where I want to change navigation back to the main page, but can't seem to do it, whichever way I try. I tried both:
onLogoutFinished={() => {
console.log("logout.")
this.props.navigation.dispatch(NavigationActions.reset({
index: 0,
actions: [
NavigationActions.navigate({ routeName: 'MainNavigator' })
]
}));
and
onLogoutFinished={() => {
console.log("logout.")
this.props.navigation.navigate('MainNavigator'));
}}
but both produce: Undefined is not an object ( evaluating '_this2.props.navigation.dispatch' ). Any ideas?