Can I connect createBottomTabNavigator to a redux store ? (React Native) - react-native

Question

I have App.js looks like this
const TabNavigationStack = createBottomTabNavigator(
{
Dashboard: {
screen: Dashboard,
navigationOptions: {
tabBarLabel: () => null,
tabBarIcon: ({ tintColor }) => (
<Icon style={{ fontSize: 35, color: tintColor }} name='dashboard' type='MaterialIcons' />
)
}
},
Home: {
screen: OrderStack,
navigationOptions: {
tabBarLabel: () => null,
tabBarIcon: ({ tintColor }) => (
<Icon style={{ fontSize: 35, color: tintColor }} name='money' type='FontAwesome' />
)
}
},
Notification: {
screen: NotificationStack,
navigationOptions: {
tabBarLabel: () => null,
tabBarIcon: ({ tintColor }) => (
<IconBadge
MainElement={
<Icon style={{ fontSize: 35, color: tintColor }} name='notifications' type='MaterialIcons' />
}
IconBadgeStyle={{ zIndex: 1 }}
BadgeElement={
<Text style={{ color: '#FFFFFF', fontSize: 10 }}>0</Text>
}
Hidden={0}
/>
)
}
},
Profile: {
screen: Profile,
navigationOptions: {
tabBarLabel: () => null,
tabBarIcon: ({ tintColor }) => (
<Icon style={{ fontSize: 35, color: tintColor }} name='person' type='Ionicons' />
)
}
},
}, // router config
{
initialRouteName: 'Home',
order: ['Dashboard', 'Home', 'Notification', 'Profile'],
gesturesEnabled: false,
navigationOptions: {
header: null,
tabBarVisible: true
},
tabBarOptions: {
activeTintColor: COLOR.PRIMARY_COLOR,
inactiveTintColor: '#29333D'
}
}
)
const CombinedStack = createSwitchNavigator(
{
AuthStack: AuthStack,
TabNavigationStack: TabNavigationStack,
},
{
initialRouteName: 'AuthStack'
}
)
class App extends Component {
render() {
return (
<Root>
<Provider store={store}>
<CombinedStack ref={navigationRef => {
NavigationService.setTopLevelNavigator(navigationRef)
}
} />
</Provider>
</Root>
);
}
}
export default App;
Im planning to connect props in create navigator when the user login, I call an api which indicate the number of badge that connected in redux.
I already tried
const mapStateToProps = (state) => ({
badgeNumber: state.Notification
});
const mapDispatchToProps = (dispatch) => ({
dispatch: dispatch
})
const TabNavigationStack = connect(mapStateToProps)(createBottomTabNavigator)({....
but the I got error in props.
BTW I'm using react-navigation 2

Answer 1

Move your IconBadge component into a separate javascript file ... and connect that component to redux store
const AppIconWithBadge = ({ badgeNumber }) = {
//...
};
const mapStateToProps = (state) => ({ badgeNumber: state.Notification });
export default connect(mapStateToProps)(AppIconWithBadge);
tabBarIcon: ({ tintColor }) => (
<AppIconWithBadge style={{ fontSize: 35, color: tintColor }}
name='person' type='Ionicons' />
)