React Native Material Bottom Tabs Border radius

Question

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?

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}}
    >

Answer 1

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

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

Answer 2

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