Adding to borderRadius to tabBarOptions leave a white background. Can not add radius to the Tab Bar.

[thegitparticle]

Bug

When I try to add some curvature to the edges of the Tab Bar (so it doesn't look like a perfect rectangle), the Tab Bar does bend the edges but the background of the Tab Bar has a white background which ruins the whole point.

The only custom options I added to the given implementation in the README file is adding of these Tabbar options - tabBarOptions={{ style: { backgroundColor: '#181818', borderRadius: 30, borderTopWidth: 2, borderColor: 'rgba(255, 255, 255, 0.1)', }, }}

FYI: Removing everything else from the above tabBarOptions, except for borderRadius also produces the same issue of white background.

Here is the image of how it looks now.

Environment info

Library	Version
@gorhom/animated-tabbar	2.0.0
react-native	0.63.2
react-native-reanimated	1.9.0
react-native-gesture-handler	1.6.1
react-native-svg	^12.1.0

Steps To Reproduce

1. Add borderRadius to tabBarOptions
2. The Tab bar does have a radius now, but there is a white background in the back which ruins the whole point.

Describe what you expected to happen:

1. There should be a way to add radius to the white background in the back as well or it has to be transparent, so, more custom tab bars on top of the brilliant TabBar provided by this package

Reproducible sample code

<TabHere.Navigator initialRouteName="Clubs" tabBarOptions={{ style: { backgroundColor: '#181818', borderRadius: 30, borderTopWidth: 2, borderColor: 'rgba(255, 255, 255, 0.1)', }, }} tabBar={(props) => ( <AnimatedTabBar tabs={tabs} preset="flashy" keyboardHidesTabBar={true} iconSize={20} itemContainerWidth="fill" {...props} /> )}>

[thegitparticle]

Solution: Just change the default theme settings of Navigation Container.

[KeneePatel]

Can you explain it just with a bit of code for help ;-;

[thegitparticle]

@KeneePatel have not been working on that project since the start of the year. I really need to look into old project properly to tell how

[Yasir12598]

@KeneePatel

import { DefaultTheme } from '@react-navigation/native';
import colors from '../Config/colors';
export default {
    ...DefaultTheme,
    colors: {
        ...DefaultTheme.colors,
        primary: colors.primary,
        background: colors.background,   // provide same color as your component have, in this way you will remove white 
                                    color or what else color that appears after providing borderRadis.
        card: colors.white,
        text: colors.fontDark,

    },

}

to know about the Theme goto-----> https://reactnavigation.org/docs/themes/