How to make the background of NavigationContainer transparent in react-navigation v5?

Question

I am trying to make the background of NavigationContainer transparent for making the items under bottom to be visible , but it is not working in my case. Please do help if you know how to achieve this in react native.Following is my code for Tab.Navigator

 import {NavigationContainer, DefaultTheme} from '@react-navigation/native

 <TabNavigator.Navigator
    tabBarOptions={{
    showLabel: false,
    style: {
      backgroundColor: "blue",
      marginBottom: 15,
      borderRadius: 15,
      marginHorizontal: 10,
      height:60
      },
    activeTintColor: constants.APP_THEME_COLOR,
    inactiveTintColor: constants.APP_WHITE_COLOR,
    keyboardHidesTabBar: true,
  }}>
  ....
  const navTheme = {
   ...DefaultTheme,
  colors: {
   ...DefaultTheme.colors,
  background: 'red',
  },
};
function App() {
  return (
   <NavigationContainer theme={navTheme}>
     <SwitchNavigator />
  </NavigationContainer>
 );

}

I have tried background: 'transparent' ,but it is not working.Please refer the screenshot attached.

background:red

2.background:transparent

I believe you need to put a `flex: 1` in the container styling — Joel Hager, Jun 24 '22 at 07:40
@JoelHager Could you please be more specific to which container I need to give `flex:1` ? — Linu Sherin, Jun 24 '22 at 07:50
Whatever is nested under the red background. Looks like the switch navigator. — Joel Hager, Jun 24 '22 at 08:11

score 3 · Accepted Answer · answered Jun 24 '22 at 12:08

3

I fixed this issue by adding position:absolute to tabBarOptions

tabBarOptions={{
    showLabel: false,
    style: {
  backgroundColor: "blue",
  marginBottom: 15,
  borderRadius: 15,
  marginHorizontal: 10,
  height:60,
  position: 'absolute',
    },

answered Jun 24 '22 at 12:08

Linu Sherin

1,712
7
38
88

How to make the background of NavigationContainer transparent in react-navigation v5?

1 Answers1