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.

1. background:red

2.background:transparent

Answer 1

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',
    },