React Native add border Radius to active tab bar

Question

I want to implement a top border radius to the active tab bar navigator to be like below image.

My code below is implementing a border radius to the whole createBottomTabNavigator but not as I expected above

<Tab.Navigator
        tabBarOptions={{
            showLabel:false,
            activeBackgroundColor: COLORS.reddish,
            inactiveBackgroundColor: COLORS.transparent,
            style:{
                position:'absolute',
                bottom:0,
                right:0,
                left:0,
                elevation:0,
                height:55,
                borderTopRightRadius: 20,
                borderTopLeftRadius: 20,

            },
            
        }}
    >
        <Tab.Screen
            name="Home"
            component={Home}
            options={{
                tabBarIcon:({focused })=> (
                    <View style={{
                            alignItems:'center',
                            justifyContent:'center',
                            }}>
                        <Image 
                            source={icons.home}
                            resizeMode='contain'
                            style={{
                                width:30,
                                height:30,
                                tintColor:focused?COLORS.white: COLORS.reddish
                            }}
                        />
                        <Text style={{
                            color:focused?COLORS.white:COLORS.reddish,
                            
                        }}>HOME</Text>
                    </View>
                )
            }}
        />
     //code for other Tab.Screen

</Tab.Navigator>

Kindly assist

I faintly remember having issues with using the specific border radius' instead of just borderRadius. I don't know if this is possible for you but you can usually get around it by wrapping the original view in a view that holds the borderRadius styling as well as overflow: 'hidden' — BaconPancakes, Mar 25 '21 at 13:41

score 1 · Accepted Answer · answered Mar 25 '21 at 14:37

I was able to figure out after going through React Navigation documentation.

To styles an individual tab I've added tabStyle in tabBarOptions props as seen in below code.

<Tab.Navigator
        tabBarOptions={{
            showLabel:false,
            activeBackgroundColor: COLORS.reddish,
            inactiveBackgroundColor: COLORS.transparent,
            tabStyle:{ //Add this 
                borderTopRightRadius:20,//add border top right radius
                borderTopLeftRadius:20,//add border top left radius
                paddingVertical:3
            },
            style:{
                position:'absolute',
                bottom:0,
                right:0,
                left:0,
                elevation:0,
                height:60,

            },
            
        }}
        
        
    >

The results are as per below just as I wanted

Thank you @Ankit Patel.

I have not tried your method but i'll definitely try it

score 1 · Answer 2 · answered Nov 29 '21 at 07:44

1

I Added border radius to each tab item like this :

 <Tab.Navigator
      screenOptions={{
        tabBarActiveBackgroundColor: 'red',
        headerShown: false,
        tabBarItemStyle: {
          borderRadius: 200,
        },
      }}

answered Nov 29 '21 at 07:44

Mehdi Faraji

2,574
8
28
76

score 0 · Answer 3 · answered Aug 26 '22 at 05:46

0

tabBarOptions={{
        tabStyle: {
          borderTopRightRadius: 8, 
          borderTopLeftRadius: 8, 
          backgroundColor: colors.white,
        },
      }}

answered Aug 26 '22 at 05:46

asad minhas

147
2
10

score -2 · Answer 4 · answered Mar 25 '21 at 13:39

activeBackgroundColor: COLORS.reddish, First remove this and

 <View style={{
            alignItems:'center',
            borderTopRightRadius: 20,
            borderTopLeftRadius: 20,
            backgroungColor:focused?COLORS.reddish: COLORS.white
            justifyContent:'center',
         }}>

in Tab.screen View Change this

React Native add border Radius to active tab bar

4 Answers4