In my navigation bar, there are 3 tabs, i added borderRadius to the whole navigation bar and Indicator. What i want to achieve is

  • When the 1st tab is active, both borderBottomRightRadius and borderTopRightRadius must be removed.
  • when the middle tab is active, the borderRadius of the whole indicator must be removed.
  • When 3rd tab is active, borderBottomLeftRadius and borderTopLeftRadius must be removed

Below images show the current scenario.

when the 1st tab is active

When the middle tab is active

when the 3rd tab is active

here is the code.

const Width = Dimensions.get('window').width;
const tabBarWidth = Width - 30; 

const Navigation = createMaterialTopTabNavigator(
    {
        S1: Screen1,
        S2: Screen2,
        S3: Screen3,
    },
    {
        swipeEnabled: false,
        animationEnabled:false ,
        tabBarOptions: {
            activeTintColor: "white",
            inactiveTintColor: "blue",
            upperCaseLabel: false,
            scrollEnabled: false,
            inactiveBackgroundColor: "white",
            indicatorStyle: {
                height: null,
                top: 0,
                backgroundColor: 'blue',
                borderRadius:10
            },
            style: {
                marginLeft: 15,
                marginRight:15,
                borderWidth: 1,
                borderRadius: 10,
                height: 30,
                borderColor: "blue",
                backgroundColor: "white",
            },
            tabStyle: {
                justifyContent: "center",
                width: tabBarWidth/3
            },
            labelStyle: {
                marginTop: -4
            }
        }
    }
);

How can i fix this ?

0 Answers