How to Make Bottom Tab Bar Corners Transparent in React Native?

I am developing an app using React Native, and I want to create a bottom tab bar with rounded corners. While I managed to round the corners using borderTopEndRadius and borderTopLeftRadius, the corners have a white background, and I want them to be transparent. The rest of the tab bar should retain its color, but I need the corners to be transparent.

Here’s the current styling I’m using:

tabBarStyle: {
  backgroundColor: "#990540",
  height: 63,
  borderTopEndRadius: 15,
  borderTopLeftRadius: 15,
  borderTopWidth: 0,
}

With this configuration, the corners are rounded, but they still show a white background. How can I make only the corners transparent while keeping the rest of the tab bar background color intact?

I haven't tried it yet because I can't think of anything.

So the problem is basically after rounding the corners you left with white background behind those corners

and according to me "Transparent corners" means the space behind those cornors should match with the color of screen rather than white color.

Kindly add position :'absolute' and see if it solves your issue

<Tab.Navigator screenOptions={{ headerShown: false, tabBarStyle:{ backgroundColor: "#990540", height: 63, borderTopEndRadius: 15, borderTopLeftRadius: 15, borderTopWidth: 0, position:'absolute', } }}

>

bottom Tab in dark Theme bottom Tab in light Theme

and sorry if i misunderstood you