Nested Navigators in Redux

[dmhood]

Hello,

I'm trying to set up a TabNavigator inside a StackedNavigator, sort of like this:

TabsNavigator = TabNavigator({
            HomeScreen: {
                screen: HomeScreen,
                navigationOptions: {
                    tabBar: () => ({
                        label: 'Home'
                    })
                }
            },
            MyAction: {
                screen: Settings,
                navigationOptions: {
                    tabBar: () => ({
                        label: 'Settings'
                    })
                }
            },
        }, {
            tabBarPosition: 'bottom',
            animationEnabled: true,
            swipeEnabled: true
        });
        ModalNavigator = StackNavigator({
            Home: {
                screen: TabsNavigator
            }
        });

My issue is, since I'm using Redux, I can pass the outer StackedNavigator the nav state easily enough:

import { ModalNavigator } from '../scenes';
const AppNavigatorWithRedux = connect()(ModalNavigator);
<AppNavigatorWithRedux
         navigation={navigation}
/>

But I don't know how to pass the TabNavigator's state down to it. I'm assuming right now I'm going to have to wrap it in another component and get my other navigation state, but is there another/simpler way?

My reducer is:

import { ModalNavigator, TabsNavigator } from '../scenes';
const navReducer = (state, action) => {
    return {
        ModalNavigator: ModalNavigator.router.getStateForAction(action, state),
        TabNavigator: TabNavigator.router.getStateForAction(action, state)
    };
};

const appReducer = combineReducers({
    navReducer,
    mainReducer
});

[ericvicenti]

So this should actually just work out of the box, and here's why:

Because TabsNavigator is set up as a screen on ModalNavigator, it will automatically nest routers. This means that the output of ModalRouter.getStateForAction actually contains the state from the tabs router.

ModalRouter is your app's main router, so it is the only reducer you need. You don't need to attach TabNavigator to redux manually.

Closing for now but please re-open if you run into issues with this approach

[dmhood]

Looks like its working, thanks!