There is no route defined for key - react-native

Question

I'm using react native, with redux and react navigation. I have everything setup, however, I'm getting a weird issue/error
In my reducer, I have the following
const initialNavState = {
index: 1,
routes: [
{ key: 'Login', routeName: 'Login' },
{ key: 'ResetPassword', routeName: 'ResetPassword' },
],
};
const initialAuthState = { isLoggedIn: false };
const AppReducer = combineReducers({
nav: (state = initialNavState, action) => {
switch(action.type) {
case 'Login':
return AppNavigator.router.getStateForAction(NavigationActions.back(), state);
case 'Logout':
return AppNavigator.router.getStateForAction(NavigationActions.navigate({ routeName: 'Login' }), state);
case 'ResetPassword':
return AppNavigator.router.getStateForAction(NavigationActions.navigate({ routeName: 'ResetPassword' }), state);
case 'Home':
return MainScreenNavigator.router.getStateForAction(NavigationActions.navigate({ routeName: 'Home' }), state);
default:
return AppNavigator.router.getStateForAction(action, state);
}
}
});
export default AppReducer;
This works fine and I can navigate better my two views but when I add another route
{ key: 'Home', routeName: 'Home' },
I get the following error "There is no route defined for key must by one of login resetpassword.
Not sure what I'm doing wrong?
Updated my router
// Native tab navigation
export const TabsNavigation = TabNavigator({
Home: {
screen: Home,
navigationOptions: ({ navigation }) => ({
tabBarLabel: 'Home',
headerLeft : <DrawerIcon navigation={navigation} />,
tabBarIcon: ({ tintColor }) => <Icon name="home" size={28} color={tintColor} type={"font-awesome"} />
}),
},
Photos: {
screen: Photos,
navigationOptions: {
tabBarLabel: 'Photos',
tabBarIcon: ({ tintColor }) => <Icon name="camera" size={28} color={tintColor} type={"font-awesome"} />
},
},
SiteDiary: {
screen: SiteDiary,
navigationOptions: {
tabBarLabel: 'Site Diary',
tabBarIcon: ({ tintColor }) => <Icon name="cog" size={28} color={tintColor} type={"font-awesome"} />
},
},
});
export const AppNavigator = StackNavigator({
Login: {
screen: Login,
navigationOptions: {
title: "Login",
headerLeft: null
},
initialRouteName : 'Home'
},
ResetPassword: {
screen: ResetPassword,
navigationOptions: {
title: "Reset Password",
headerLeft: null
},
}
});
// Main navigation StackNavigator
export const MainScreenNavigator = StackNavigator({
Home: {
screen: TabsNavigation,
navigationOptions: {
title: "Home",
headerLeft: null,
}
}
});
Index.js (main)
// App state
const AppWithNavigationState = connect( state => ({ nav: state.nav})) (({ dispatch, nav }) => (
<AppNavigator navigation = { addNavigationHelpers ({ dispatch, state: nav })} />
));
class App extends React.Component {
store = createStore(AppReducer, undefined, autoRehydrate());
componentDidMount() {
persistStore(this.store, { storage: AsyncStorage });
}
render() {
return (
<Provider store={this.store}>
<AppWithNavigationState />
</Provider>
);
}
}
AppRegistry.registerComponent('App', () => App);
export default App;
I the core issue is with AppNavigator on my main file, I'm trying to have
AppNavigator -- this holds all the public login views
MainScreenNavigator -- This is the main app
and later add a darwer but right now would be nice to get just this working.
The issue is I'm not sure how you can jump between StackNavigator