Unable to set transparent BG of Tab Navigator Screen

[chasepoirier]

Current Behavior
I'm not able to set the background color of the Tab Navigator screen to transparent, it instead shows the default gray background. I can set the tabbar component to transparent as seen in the screenshot (the color behind the tab navigator is black), but the screen does not do the same.

• current code

import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { View, Text } from "react-native";
import { NavigationContainer } from "@react-navigation/native";

const Tab = createBottomTabNavigator();

const Component = () => {
  return (
    <View
      style={{
        flex: 1,
        backgroundColor: "transparent",
        justifyContent: "center",
        alignItems: "center"
      }}>
      <Text>Component</Text>
    </View>
  );
};

export default function MockTabStack() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        tabBarOptions={{
          style: {
            backgroundColor: "transparent"
          }
        }}>
        <Tab.Screen component={Component} name="Initial" />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Expected Behavior

When setting the background to transparent for the tab navigator screen, it should show the color below the navigator (black in this case).

How to reproduce

• Set the background style to "transparent" for the screen

Your Environment

software	version
@react-navigation/native	5.1.6
@react-navigation/bottom-tabs	5.2.7
react-native-screens	2.5.0
react-native	0.61.2
node	10.16.3

[ozerty]

Hi, any news about this one ?

Thanks

[ShivamJoker]

I am screwed too

Can someone please help ?

[bartekkaminski]

@ShivamJoker

Add elevation: 0

The code below will make a transparent Bottom Bar

<NavigationContainer>
  <Tab.Navigator tabBarOptions={{
    style: {
      backgroundColor: 'transparent',
      position: 'absolute',
      borderTopWidth: 0,
      elevation: 0,
    }
  }}>
    <Tab.Screen name="Home" component={Home} />
    <Tab.Screen name="Second" component={Second} />
  </Tab.Navigator>
</NavigationContainer>

[ShivamJoker]

@ShivamJoker

Add elevation: 0

The code below will make a transparent Bottom Bar

<NavigationContainer>
  <Tab.Navigator tabBarOptions={{
    style: {
      backgroundColor: 'transparent',
      position: 'absolute',
      borderTopWidth: 0,
      elevation: 0,
    }
  }}>
    <Tab.Screen name="Home" component={Home} />
    <Tab.Screen name="Second" component={Second} />
  </Tab.Navigator>
</NavigationContainer>

Thanks this works we should close the issue now :)

[steventeague]

Hi,

This issue remains, as the OP stated the BG colour can't not be set on the screen ( not the bar ) it is always the default grey. Having a requirement to make the background transparent to overlay over native screens means this is broken.

[crrobinson14]

Not sure if this is the same issue holding this ticket open, but I was able to address this with sceneContainerStyle={{backgroundColor: 'transparent'}} in my <Tab.Navigator element.

[piesrtasty]

@chasepoirier @crrobinson14 This took me hours to figure out. I had to go into the actual package to see how the styles were being applied.

This is for react-navigation Version 5.x. I can't speak for previous versions.

But the only way to change the background color of the actual tab views that are for each scene in the bottom tab navigator is to pass a theme into the top level NavigationContainer component where you specify transparent for colors.background

import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

const Tab = createBottomTabNavigator();

const theme = {
    colors: {
      background: "transparent",
    },
  };

<NavigationContainer theme={theme}>
     <Tab.Navigator>
          <Tab.Screen component={ComponentA} name="A" />
          <Tab.Screen component={ComponentB} name="B" />
     </Tab.Navigator>
</NavigationContainer>

In the above example ComponentA and ComponentB the screens for each of the tabs will have transparent backgrounds.

Hope this helps! 😄

[mvrdrew]

@LukeHamilton Thanks for that suggestion, I've tried out it and it works but it breaks other components in the hierarchy so it's still not a 100% solution.

@crrobinson14 I've had a look for that setting, but it doesn't exist in bottom-tabs, only on drawerNavigator and materialTopTabNavigator.

It seems like that's the ideal prop for this situation though, has it been left off bottom-tabs for a reason or has it just been overlooked in the v5 rewrite? It does seem very odd that there's no way to change the background colour of tab screens like you can in other navigators.

[mvrdrew]

I thought I'd have a go at implementing sceneContainerStyle into the bottom-tabs navigator. It's partially based on the drawer implementation, so you can still use a theme but also override using this prop's styles.

Before I submit a PR, I thought I'd put it up here first to see if there's any glaring errors I've made.

(see PR below - have submitted it under my personal account)

If any maintainers see this, I'd be really keen to hear their feedback and if it's worth continuing with.

[mvrdrew]

This ticket can be closed now this PR has been merged.

[bondansebastian]

@ShivamJoker

Add elevation: 0

The code below will make a transparent Bottom Bar

<NavigationContainer>
  <Tab.Navigator tabBarOptions={{
    style: {
      backgroundColor: 'transparent',
      position: 'absolute',
      borderTopWidth: 0,
      elevation: 0,
    }
  }}>
    <Tab.Screen name="Home" component={Home} />
    <Tab.Screen name="Second" component={Second} />
  </Tab.Navigator>
</NavigationContainer>

You saved my life buddy.

[predbjorn]

@ShivamJoker
Add elevation: 0
The code below will make a transparent Bottom Bar

<NavigationContainer>
  <Tab.Navigator tabBarOptions={{
    style: {
      backgroundColor: 'transparent',
      position: 'absolute',
      borderTopWidth: 0,
      elevation: 0,
    }
  }}>
    <Tab.Screen name="Home" component={Home} />
    <Tab.Screen name="Second" component={Second} />
  </Tab.Navigator>
</NavigationContainer>

Thanks this works we should close the issue now :)

Works on v6.x too:

       tabBarStyle: {
            backgroundColor: 'transparent',
            position: 'absolute',
            borderTopWidth: 0,
            elevation: 0,
        },
    }}      

[github-actions]

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.

[Lakshya-Katarmal]

@ShivamJoker

Add elevation: 0

The code below will make a transparent Bottom Bar

<NavigationContainer>
  <Tab.Navigator tabBarOptions={{
    style: {
      backgroundColor: 'transparent',
      position: 'absolute',
      borderTopWidth: 0,
      elevation: 0,
    }
  }}>
    <Tab.Screen name="Home" component={Home} />
    <Tab.Screen name="Second" component={Second} />
  </Tab.Navigator>
</NavigationContainer>

this worked for me.
Thanks @ShivamJoker

[aliciabarczak]

For anyone who is struggling and none of the above worked, this is what worked for me:

<Tab.Navigator
  screenOptions={({ route }) => ({
    ...
    tabBarStyle: [{
      backgroundColor: 'transparent',
      position: 'absolute',
      borderTopWidth: 0,
      elevation: 0,
    }],
  })}>

[ToxicoFR]

For anyone who is struggling and none of the above worked, this is what worked for me:

<Tab.Navigator
  screenOptions={({ route }) => ({
    ...
    tabBarStyle: [{
      backgroundColor: 'transparent',
      position: 'absolute',
      borderTopWidth: 0,
      elevation: 0,
    }],
  })}>

Thanks!!

[abuayaan-01]

Not sure if this is the same issue holding this ticket open, but I was able to address this with sceneContainerStyle={{backgroundColor: 'transparent'}} in my <Tab.Navigator element.

Thanks a lot I have been putting this inside ScreenOptions