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',
}
}}
>
and sorry if I misunderstood you