How do you make rounded corners on a tab bar on React Native with React Navigation?

Question

Stack:

• React Native
• React Navigator
• Core components only

I have this style on TabNavigator.tsx:

const styles = StyleSheet.create({
  tabStyle: {
    backgroundColor: colors.background,
    borderTopLeftRadius: 40,
    borderTopRightRadius: 40,
    height: 80,
    overflow: 'hidden',
    // position: 'absolute', // needed to ensure the bar has a transparent background in the corners
  },
})

I keep commented the position absolute, there is always a background behind the corners, making it looking weird when a component of another color scroll.

Here it is, colored in yellow for visibility:

If I un-comment position absolute, the content flow behind the tab bar, making it feel more natural.

But...

I need to add a bottom margin on each screen to compensate the space that the tab takes, or the content in the bottom is hidden.

There i feel that there should be a good practice or a known pattern, maybe a tested workaround, that would make my life easier. Do you have an idea?

Thanks

Answer 1

Ahh, it's simple, after going through trial and error I discovered that just add Border Radius to it and make sure barStyle has overflow hidden. Here I pasted the snippet for it.

barStyle:{
    borderRadius:50,
    backgroundColor:"orange",
    position: 'absolute',
    overflow:'hidden',
    left: 0,
    bottom: 0,
    right: 0,
    padding:5,
}

Answer 2

Thnx me later...

tabBarOptions={{
        style: {
          backgroundColor: 'green',
          borderTopLeftRadius: 30,
          borderTopRightRadius: 30,
          overflow: "hidden",
        },
      }}