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
});
So this should actually just work out of the box, and here’s why:
Because
TabsNavigator
is set up as a screen onModalNavigator
, it will automatically nest routers. This means that the output ofModalRouter.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