Nested Navigation using Redux

237 views Asked by At

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 ?

0

There are 0 answers