1

I am new to react native. I am struggling to solve the issue. I want to change tabBarBadgeStyle to whether it's active or not.

<Tab.Screen name="mcart" component={CartNavigation} options={{
                    headerShown:false,
                    tabBarShowLabel: false,
                    tabBarBadge:cartData.cartItems ? cartData.cartItems.length:0,
                    tabBarBadgeStyle: ({ focused }) => {
                        return {
                            backgroundColor: focused ? 'red' : 'gray',
                            top: focused ? -15 : 0,
                            alignSelf: 'center',
                            justifyContent: 'center',
                            alignItems: 'center',
                            minWidth: 30,
                            height: 30,
                            borderRadius: 15,
                            borderWidth: 1,
                            borderColor: 'white'
                        }
                    },
                    tabBarIcon: ({focused, image}) => {
                        image = require('../assets/icons/add-to-cart.png');
                        return <View style={focused ? styles.activeTab : styles.inactiveTab}>
                            <Image
                                source={image}
                                resizeMode={'contain'}
                                style={{
                                    width: 15,
                                    height: 15,
                                    tintColor: focused ? 'red' : 'gray',
                                }}
                            />
                            <Text style={{color: focused ? 'red' : 'gray', fontSize:12}}>Cart</Text>
                        </View>;
                    },
    
                }}/>

Everything is working fine except tabBarBadgeStyle. please help me to get rid of it.

"@react-navigation/bottom-tabs": "^6.5.7",
"@react-navigation/native": "^6.1.6",
"@react-navigation/stack": "^6.3.16",
HimonHimu
  • 104
  • 7

1 Answers1

0

I achive my expected design using this way! try it if works..

but for you it is must to provide expected result image for better Result 

<TopTab.Navigator
        screenOptions={{
          tabBarLabelStyle: {
            fontSize: height < 684 ? normalizeText(10.5) : normalizeText(11.5),
            fontWeight: "bold",
            color: "white",
            elevation: 10,
          },
          tabBarStyle: {
            backgroundColor: GlobalStyles.colors.mainC,
            
          },
          tabBarIndicatorStyle: {
            backgroundColor: "white",
            height: scale(5),
            borderTopLeftRadius: scale(4),
            borderTopRightRadius: scale(4),
            elevation: 10,
          },
          
          
        }}
      >
Kishan
  • 106
  • 6
  • I am talking about tabBarBadgeStyle – HimonHimu Mar 21 '23 at 08:53
  • Note: I did it in my project using redux & useIsFocused. But my solution is not that good & I need to write more code for this. is this way works then it should be easier to read code & maintain a project. – HimonHimu Mar 21 '23 at 08:56
  • okay got your point – Kishan Mar 21 '23 at 13:10
  • Refer [this](https://stackoverflow.com/questions/59171124/how-to-add-badge-to-tab-bar-in-react-native#:~:text=import%20React%20from%20'react'%3B,badgeProps%7D%20style%3D%7Bstyles) – Kishan Mar 21 '23 at 13:45
  • the solution is not in my style. but thanks for your effort. – HimonHimu Mar 23 '23 at 03:54