React-native nested navigators within Redux - reactjs

Question

I've decided that I need to swap my regular react-nagivation setup for a redux container, mostly because I need to keep track of stuff like login status etc.
I won't lie that since it's my first react navigation moving it into redux is a hell lot of confusion for me, but step by step I've got to the point where my basic structure is working, well... almost working.
What I have is a StackNav on top of everything, with the main screen being a TabNav. The screen is loading fine, and parts of the app that switch to different screen of that top-level StackNav are working fine. My problem occurs when I switch from 1st tab to the 2nd within that TabNav.
To clarify, I've got 2 tabs - 'Home' and 'My Account'.
Switching from home to my account does look like tabs are being switched, but the component is not being rendered properly. It's missing all that's within the render function for it together with the styles. Then, when I want to switch back to 'Home' tab, the screen slides like I would actually switch between top-level StackNav, instead of just switching between tabs. On top of that, Now after being back to 'Home' tab, I've got the option to 'go back' in the top left corner which when used, just slides to the 'previous' view of Home, even tho it's the same tab.
I'm confused while writing that but hopefully someone will be able to see sense in that. Here's my code:
top level Stack Nav config:
const routeConfiguration = {
Home: { screen: HomeTabsNavigation },
GameList: { screen: GameList },
OfferDetails: { screen: OfferDetails },
}
const stackNavOptions = {
initialRouteName: 'Home',
mode: 'card',
headerMode: 'float',
}
export const StackNavConfig = StackNavigator(routeConfiguration, stackNavOptions);
top level Stack Nav component:
const mapStateToProps = (state) => {
return {
navigationState: state.stackNav,
}
}
class StackNavigation extends React.Component {
render() {
const { dispatch, navigationState } = this.props
return (
<StackNavConfig
navigation={
addNavigationHelpers({
dispatch,
state: navigationState,
})
}
/>
)
}
}
export default connect(mapStateToProps)(StackNavigation)
HomeTabs defined as the first screen of top-level StackNav:
const HomeTabs = TabNavigator({
Home: { screen: HomeView },
MyAccount: { screen: MyAccountView },
}, {
tabBarOptions: tabBarOptions,
});
export default HomeTabs;
HomeTabs component:
const mapStateToProps = (state) => {
return {
navigationState: state.homeTabs,
}
}
class HomeTabsNavigation extends Component {
render() {
const { navigationState, dispatch } = this.props;
return (
<HomeTabs
navigation={
addNavigationHelpers({
dispatch,
state: navigationState,
})
}
/>
);
}
}
export default connect(mapStateToProps)(HomeTabsNavigation);
My Redux store:
const middleware = () => {
return applyMiddleware(createLogger());
}
export default createStore(
combineReducers({
stackNav: (state, action) => StackNavConfig.router.getStateForAction(action, state),
homeTabs: (state, action) => HomeTabs.router.getStateForAction(action, state),
}),
middleware(),
)
My TabNav views are just displaying text for now so I won't put them here unless it's important, then I'll of course update the code.
Help! ;)

Answer 1

Ok so I've found the issue. The problem was that I had same route name defined in both top level Stack Navigator and nested Tab Navigator.
As you can see here:
const routeConfiguration = {
Home: { screen: HomeTabsNavigation },
GameList: { screen: GameList },
OfferDetails: { screen: OfferDetails },
}
const stackNavOptions = {
initialRouteName: 'Home',
mode: 'card',
headerMode: 'float',
}
export const StackNavConfig = StackNavigator(routeConfiguration, stackNavOptions);
and here:
const HomeTabs = TabNavigator({
Home: { screen: HomeView },
MyAccount: { screen: MyAccountView },
}, {
tabBarOptions: tabBarOptions,
});
export default HomeTabs;
It seems that these routes are maybe merged together at some point and whenever my Tab Nav was trying to go 'back' to his 'Home' screen it was the top-level Stack Nav taking over the control and loading it's own 'Home' screen on top of what was there before, creating exactly what it is which is a Stacked View of screens. I've renamed it to 'TabsHome' and everything is working fine. Solved!