How do you make the react-native react-navigation tab bar transparent - react-native

Question

Is there a way to make the tab bar transparent? I tried the following but it just showed a white background. Do I need to implement my own tabBarComponent? If so, is there any documentation on that class and what interface I need to implement?
const MainTabNavigator = TabNavigator(
{
MessageCenter: { screen: MessageCenterStack },
Camera: { screen: CameraStack },
},
{
tabBarPosition: 'bottom',
swipeEnabled: true,
animationEnabled: true,
tabBarOptions: {
style: {
backgroundColor: 'transparent',
},
}
}
);

Answer 1

I have to set position absolute and give it a left right and bottom for it the backgroundColor transparent to take effect.
tabBarOptions: {
showIcon: true,
showLabel: false,
lazyLoad: true,
style: {
backgroundColor: 'transparent',
borderTopWidth: 0,
position: 'absolute',
left: 50,
right: 50,
bottom: 20,
height: 100
}
}

Answer 2

I finally got it working on android and ios by adding a container view for the custom tab bar component and make the container absolute positioned and leave the tab bar as it is
Here is the custom tab bar component
const TabBarComponent = (props) => (<BottomTabBar {...props} />)
Here is the tab bar options
{
tabBarComponent: props => {
return (
<View style={{
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
}}>
<TabBarComponent {...props} />
</View>
)
},
tabBarOptions: {
style: {
borderTopWidth: 0,
backgroundColor: '#FFFFFF',
borderTopRightRadius: 20,
borderTopLeftRadius: 20,
height: 55,
paddingBottom: 5,
}
},
initialRouteName: 'HomeScreen',
}
And the final result

Answer 3

position: 'absolute' is a solution for this, but you may notice it'll not look perfectly with the android side, however working perfectly for the android side.
Finally, I found the solution to this after long hard work.
elevation: 0
Set this on tab bar style will fix this issue.
Example -
tabBarOptions={{
showIcon: true,
showLabel: true,
activeTintColor: COLORS.tabSelected,
inactiveTintColor: COLORS.tabNormal,
style: {
backgroundColor:'transparent',
borderTopWidth: 0,
position: 'absolute',
elevation: 0 // <-- this is the solution
},
labelStyle: {
fontSize: 12,
},
}}>
Here are the output screenshots.

Answer 4

A lot of the answers here seem to be a little convoluted for the question. So for others looking how to do so, here's a simple answer:
Within the tab bar options change position to absolute and background colour to transparent such that it looks like:
tabBarOptions: {
style: {
backgroundColor: 'transparent',
position: 'absolute',
left: 0,
bottom: 0,
right: 0
}
}

Answer 5

This is how I solved this for react-navigation v6
import {
createBottomTabNavigator,
BottomTabBar,
} from '#react-navigation/bottom-tabs';
We need to use BottomTabBar to customize the layout and make it transparent
const Tab = createBottomTabNavigator();
<Tab.Navigator
// Here under tabBar we customize the view and set the bg to transparent
tabBar={props => (
<View style={{ backgroundColor: 'transparent', position: 'absolute', left: 0, bottom: 0, right: 0 }}>
<BottomTabBar {...props} />
</View>
)}>
...
If you do it under
screenOptions={({ route }) => ({
tabBarStyle:{
position:absolute,
...
}
})
}
it doesn't work as excpected

Answer 6

For React Navigation v6, you would want to set up screenOptions on the TabNavigator. (I use it in combination with custom / transparent bottom tab bar).
import {
BottomTabBar,
createBottomTabNavigator,
} from '#react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();
<Tab.Navigator
screenOptions={{
tabBarStyle: {backgroundColor: 'blue'},
}}
tabBar={props => {
return (
<View>
<BottomTabBar {...props} />
</View>
);
}}
initialRouteName={SCREEN_NAMES.APP.HOME_TAB}
...
</Tab.Navigator>

Answer 7

Mohammed Tawfik's answer worked for me but I had to import <BottomTabBar>component from react-navigation-tabs instead of suggested react-navigation.

Answer 8

In React Navigation v5
tabBarOptions={{
style: {
borderTopWidth: 0,
backgroundColor: 'transparent',
elevation: 0, // this solved the triangle type view problem in android
},
}}>

Answer 9

actually, It is getting its color from NavigationContainer theme backgroundColor you can give transparent color to NavigationContainer like this
import { NavigationContainer } from "#react-navigation/native";
import { createBottomTabNavigator } from "#react-navigation/bottom-tabs";
const Tab = createBottomTabNavigator();
const theme = { //like this
colors: {
background: "transparent",
},
};
<NavigationContainer theme={theme}>
<Tab.Navigator>
<Tab.Screen component={ComponentA} name="A" />
<Tab.Screen component={ComponentB} name="B" />
</Tab.Navigator>
</NavigationContainer>

Answer 10

The solution is simple, think about all component rendering placing in-app,
header: navigation header
body: app content
footer: tab-bar
In-app all the above three-component have their own specific place to render one after one like position relative(default).
and where you want to show the tab-bar top of the body (ignoring its position and placing), then you have to bring it on top of the body by styling tabbarOption "position: 'absolute'",
now it's working, but one new problem arise, due to position absolute body goes all the way bottom, and some of the body content is hidden behind the tab-bar
to fix that need to add padding or add some dummy with some height as per bottom tab bar inside all body screens.