I have several a stackNavigator nested in a tabNavigator and this tabNavigator is nested in a stackNavigator. I have integrated redux in order to navigate easily. My navigators :
const StackA = StackNavigator({
Main: { screen: ScreenA }
})
const TabBarNavigator = TabNavigator({
Home: { screen: StackA },
Profil: { screen: ProfilScreen }
})
const AppNavigator = StackNavigator({
Tabbar: { screen: TabBarNavigator },
Other: { screen: OtherScreen }
})
const AppWithNavigationState = ({ dispatch, nav }) => (
<AppNavigator navigation={addNavigationHelpers({ dispatch, state: nav
})} />
);
AppWithNavigationState.propTypes = {
dispatch: PropTypes.func.isRequired,
nav: PropTypes.object.isRequired,
};
const mapStateToProps = state => ({
nav: state.appNav,
});
export default connect(mapStateToProps)(AppWithNavigationState);
When I set the initial state in redux i have an error :
There is no route defined for key Tabbar. Must be one of :'StackA'
My nav reducer :
const initialNavState =
AppNavigator.router.getStateForAction(NavigationActions.reset({
index: 0,
actions: [
NavigationActions.navigate({
routeName: 'Tabbar',
})
],
}));
function nav(state = initialNavState, action) {
let nextState;
switch (action.type) {
case actions.types.navigate:
const { routeName } = action;
nextState = AppNavigator.router.getStateForAction(
NavigationActions.navigate({ routeName }),
state
);
break;
case 'Logout':
nextState = AppNavigator.router.getStateForAction(
NavigationActions.navigate({ routeName: 'Login' }),
state
);
break;
default:
nextState = AppNavigator.router.getStateForAction(action, state);
break;
}
return nextState || state;
}
I understand in my StackA i don't have Tabbar route but i do in my appNavigator. I want to initialise my default route to Tabbar in my AppNavigator without affected my StackA. It's possible ? if yes, can i use this navigation for my StackA ?