React Native Material Bottom Tabs Border radius

user_11813718 0
Viewed 1067

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}}
    >
react-navigation react-native
4 Answers

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

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

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',
},
user_12833450

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

user_113553030 
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'
           }
        }
    }
)
user_116923390
Related