Pass Props from the react-redux to React Native Bottom Tab Navigation - react-native

Question

I am struggling with the
import { createBottomTabNavigator } from 'react-navigation-tabs';
I want to pass the value of my cartItems from react redux to Bottom Navigation Icon but from no where I am able to pass the props.
Here is my code,
import React from 'react';
import { View, Text } from 'react-native';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import Icon from 'src/containers/IconTabbar';
import Home from 'src/screens/home/home';
import Cart from 'src/screens/cart/cart';
import { connect } from 'react-redux';
const Tabs = createBottomTabNavigator(
{
home: {
screen: Home,
navigationOptions: () => ({
title: 'Home',
tabBarIcon: ({ tintColor }) => <Icon name="home" color={tintColor} />,
}),
},
cart: {
screen: Cart,
navigationOptions: () => ({
title: 'Cart',
tabBarIcon: ({ tintColor }) => <View>
<View style={{ position: 'absolute', height: 20, width: 20, borderRadius: 15, backgroundColor: 'rgba(95,197,123,0.8)', right: 10, bottom: 15, alignItems: 'center', justifyContent: 'center', zIndex: 2000, }}>
//Here I want add props instead of 4 like this.props.cartItems
<Text style={{ color: 'white', fontWeight: 'bold' }}>4</Text>
</View>
<Icon name="shopping-cart" color={tintColor} />
</View>,
}),
},
},
{
defaultNavigationOptions: props => {
return {
tabBarOptions: {
style: {
height: 60,
elevation: 0,
borderTopWidth: 1,
},
activeTintColor: 'green',
inactiveTintColor: 'grey',
},
};
},
}
);
const mapStateToProps = (state) => {
return {
cartItems: state.carts.carts
}
}
export default connect(mapStateToProps)(Tabs);
Image of Static 4 Value displaying in BottomTabNavigation

Answer 1

You can create a separate component for the tab icon and connect it to redux.
Here is an untested example.
const TabIcon = (props) => {
return (
<View>
<View style={{
position: 'absolute', height: 20, width: 20, borderRadius: 15,
backgroundColor: 'rgba(95,197,123,0.8)', right: 10, bottom: 15, alignItems: 'center', justifyContent: 'center', zIndex: 2000,
}}>
<Text style={{ color: 'white', fontWeight: 'bold' }}>{props.cartItems}</Text>
</View>
<Icon name="shopping-cart" color={props.tintColor} />
</View >
)
}
const mapStateToProps = state => {
return {
cartItems: state.carts.carts
}
}
export default connect(mapStateToProps, null)(TabIcon)
You can then try something like:
tabBarIcon: ({ tintColor }) => (
<TabIcon tintColor={tintColor}/>
)