CODEWITHSUNDEEP
androidreact-nativereact-navigation
Prakash Chandra Awal
Prakash Chandra Awal

Reputation: 51

How to set backgroundColor of tabbar when the borderRadius is given to it?

Image Preview

I want to set my tabBar of borderRadius 30 and set the backgroundColor of the tabBar, but the problem is that there is white color background in the tabBar even if I have set the backgroundColor to other color! How to resolve this?

tabBarOptions: {
  showIcon: true,
  showLabel: false,
  activeTintColor: '#333645',
  inactiveTintColor: 'grey',
  style: {
    backgroundColor: '#FEB6B9',
    height: 50,
    borderRadius: 30,
    marginBottom: 10
  }
}

Upvotes: 5

Views: 1737

Answers (4)

Dobin
Dobin

Reputation: 87

If you are encompassing the bottom navigator inside a stack navigator, then you can use cardStyle of Stack Navigator`s screenOptions

<Stack.Navigator screenOptions={{  cardStyle: {backgroundColor: '#FFFFFF'} }} >....

Upvotes: 0

Usama Azam
Usama Azam

Reputation: 433

I have found a very easy way to fix this issue. You can put your Router in a view and set the view's background colour.

<View style={{backgroundColor: 'red', flex: 1}}>
 <Router/>
</View>

Upvotes: 4

K. Janjuha
K. Janjuha

Reputation: 177

"position:'absolute'" Did the trick for me:

tabBar: {
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    borderTopWidth: 0, 
    elevation: 4,
    backgroundColor: '#FBFBFB',
    shadowRadius: 20,
    shadowColor: '#000000',
    shadowOpacity: 0.2,
    position:'absolute'
  }

Upvotes: 4

displayname
displayname

Reputation: 1074

I found another workaround to remove the whitespace so it can be used for both ios and android

const DEVICE_WIDTH = Dimensions.get('window').width;

    const BottomTabNavigator = createBottomTabNavigator({
        HomeScreenStack,

        },
        {
            tabBarOptions: {
                style:{
                  borderRadius:50,
                  backgroundColor:"tomato",
                  position:'absolute',
                  bottom: 10,
                  padding:10,
                  width: DEVICE_WIDTH -30,
                  left:15,
                  right:15,
                  height: 54,
                  alignItems:'center',
               }
            }
        }
    )

Upvotes: 3

Related Questions