Should I call multiple addNavigationHelpers in nested react navigation? - react-native

Question

I'm following https://github.com/parkerdan/SampleNavigation to integrate redux with react-navigation.
I have a question: should I call addNavigationHelpers multiple times for nested navigators?
In the sample:
const routeConfiguration = {
TabOneNavigation: { screen: TabOneNavigation },
TabTwoNavigation: { screen: TabTwoNavigation },
TabThreeNavigation: { screen: TabThreeNavigation },
}
const tabBarConfiguration = {
tabBarOptions:{
activeTintColor: 'white',
inactiveTintColor: 'blue',
activeBackgroundColor: 'blue',
inactiveBackgroundColor: 'white',
}
}
export const TabBar = TabNavigator(routeConfiguration,tabBarConfiguration);
<TabBar
navigation={
addNavigationHelpers({
dispatch: dispatch,
state: navigationState,
})
}
/>
<NavigatorTabOne
navigation={
addNavigationHelpers({
dispatch: dispatch,
state: navigationState
})
}
/>
<NavigatorTabTwo
navigation={
addNavigationHelpers({
dispatch: dispatch,
state: navigationState
})
}
/>
<NavigatorTabThree
navigation={addNavigationHelpers({
dispatch: dispatch,
state: navigationState
})}
/>
addNavigationHelpers is called 4 times, one for the TabNavigator and 3 others for the tabs.
Is this the recommended way by the document?
Navigation state is automatically passed down from one navigator to another when you nest them.

Answer 1

What actually are TabBar, NavigatorTabOne, NavigatorTabTwo... ?
I suppose you have some code like this:
export const TabBar = TabNavigator({
NavigatorTabOne: { screen: NavigatorTabOne},
NavigatorTabTwo: { screen: NavigatorTabTwo},
NavigatorTabThree: { screen: NavigatorTabThree}
}, {
initialRouteName: 'NavigatorTabOne',
})
To create your root container you need this:
import { createReduxBoundAddListener, createReactNavigationReduxMiddleware } from 'react-navigation-redux-helpers';
export const navigationMiddleware = createReactNavigationReduxMiddleware(
"root",
state => state.nav,
);
const addListener = createReduxBoundAddListener("root");
class ReduxNavigation extends React.Component {
render() {
const { dispatch, nav } = this.props
const navigation = ReactNavigation.addNavigationHelpers({
dispatch,
state: nav,
addListener,
});
return <TabBar navigation={navigation} />
}
}
This could be your reducer
const firstAction = TabBar.router.getActionForPathAndParams('NavigatorTabOne')
const initialState = TabBar.router.getStateForAction(firstAction)
export const reducer = (state = initialState, action) => {
const nextState = TabBar.router.getStateForAction(action, state);
return nextState || state;
};
Anyway, don't use that repository
The official react navigation doc does exist
If you want to use something for scaffolding your react native + redux + react navigation, you can have a look a this project, that will create app base in a command