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
}
}
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',
}
}
}
)
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>
"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'
}
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'} }} >....