Getting a weird black box under the screen in react native tab navigator

Question

This is my code

const Tab = createMaterialTopTabNavigator();

<View
  style={{
    backgroundColor: "black",
    flex: 1,
    paddingTop: paddingTopForAndroid,
  }}
>
<Tab.Navigator
  screenOptions={({ route }) => screenOptions(route)}
  keyboardDismissMode="auto"
  style={{ flex: 1 }}
  >
   <Tab.Screen name="Explore" component={ExplorePosts} />
   <Tab.Screen name="Feed" component={FeedNavigator} />
  </Tab.Navigator>
</View>

The tab navigator is covering only 90% of the screen and leaves a blank black background. But when I switch the tab and come back to the primary screen, the black background is disappearing.

Answer 1

I solved this by adding this property to the View component

<View
  style={{
    height: windowHeight,
    backgroundColor: "transparent",
    borderTopLeftRadius: 40,
    overflow: "hidden",
    borderTopRightRadius: 40,
   }}
>