CODEWITHSUNDEEP
react-nativereact-navigation
Astral Cloud
Astral Cloud

Reputation: 99

React Native Material Bottom Tabs Border radius

I just want to find a way to transform my material bottom tabs just like this

Is there a way to do something like this?

enter image description here

I cant' apply a border radius to it using the barStyle

    <Tab.Navigator
    initialRouteName="Home"
    activeColor={Colors.primary}
    inactiveColor="black"
    barStyle={{ backgroundColor: 'white', borderRadius: 30}}
    >

Upvotes: 2

Views: 1865

Answers (4)

Elif
Elif

Reputation: 161

const DEVICE_WIDTH = Dimensions.get('window').width;

const BottomTabNavigator = createBottomTabNavigator({
    HomeScreenStack,
    
    },
    {
        tabBarOptions: {
            style:{
              borderTopLeftRadius:21, 
              borderTopRightRadius:21,
              backgroundColor:"#000000",
              position:'absolute',
              bottom: 0,
              padding:10,
              width: DEVICE_WIDTH,
              height: 54,
              zIndex: 8,
              overflow: 'hidden'
           }
        }
    }
)

Upvotes: 0

Guruparan Giritharan
Guruparan Giritharan

Reputation: 16334

You need to have a overflow:'hidden' along with a position:'absolute'

    barStyle={{
      backgroundColor: 'white',
      position: 'absolute',
      overflow: 'hidden',
      borderTopLeftRadius: 30,
      borderTopRightRadius: 30,
    }}>

Upvotes: 9

Nooruddin Lakhani
Nooruddin Lakhani

Reputation: 6967

This solution might help by adding overflow: 'hidden' to barStyle

barStyle: {
            borderWidth: 0.5,
            borderBottomWidth: 1,
            backgroundColor:'white',
            borderTopLeftRadius: 30,
            borderTopRightRadius: 30,
            borderColor: 'transparent',
            overflow: 'hidden',
},

Upvotes: 1

Gaurav Roy
Gaurav Roy

Reputation: 12195

This might help :

Saw it from cehck this

<NavigationContainer>
      <Tab.Navigator 
  barStyle={{ borderWidth: 0.5,
            borderBottomWidth: 1,
            backgroundColor:'orange',
            borderTopLeftRadius: 15,
            borderTopRightRadius: 15,
            borderColor: 'transparent',
            overflow: 'hidden', }}

      >
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>

Hope it helps. feel free for doubts

Upvotes: 1

Related Questions