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

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

score 3 · Accepted Answer · answered Apr 11 '20 at 00:40

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}/>
  )

Thanks for this solution it is very helpful, but in my case I want re-render bottom tab Bar, after removing items from cart (cart-component), Because my focus Tab is cart and here is cart component render in which component i dispatch a action for removing items from cart, & i am also get state from redux in my Tabicon component. i am troubling with re-render of bottom tab bar. — Ajay Batham, Apr 29 '21 at 12:49
@AjayBatham If your tab icon component is connected to redux, try to use the value e.g `cartCount` from redux. Its should be able to pick the updated value after `removeItemsFromCart` action updates the redux state. — Felix Too, Apr 29 '21 at 14:13

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

1 Answers1