How do I make my react navigation screen cover the whole screen?

Issue

I am trying to make a map screen cover the whole screen, currently it isnt covering the bottom where the bottom navigator is supposed to be. I am using a custom bottom navigator so it isnt at the bottom which is why there is a bland space at the bottom. My question is how do I make my map cover the the bottom blank space?

My code:

import React from 'react';
import { StyleSheet, Text, TouchableOpacity, View, Image } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
import MapView from 'react-native-maps';
import { Marker } from 'react-native-maps';
import FontAwesome from "@expo/vector-icons/FontAwesome"

const Tab = createBottomTabNavigator();

function HomeScreen() {
  return (
    <View style={styles.mapContainer}>
      <MapView style={styles.map} />
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={styles.container}>
      <Text>Settings Sn</Text>
    </View>
  );
}

const CustomTabBarButton = ({ children, onPress }) => {
  return (
  <TouchableOpacity
    style={{
      top: -30,
      justifyContent: 'center',
      alignItems: 'center',
      ...styles.shadow
    }}
    onPress={onPress}
  >
    <View style={{
      width: 50,
      height: 50,
      borderRadius: 50,
      backgroundColor: "#355E3B"
    }}>
      {children}
    </View>
  </TouchableOpacity>)
};

export default function Navigation() {
  return (
    <NavigationContainer>
      <Tab.Navigator
            screenOptions={({ route }) => ({
                tabBarIcon: ({ color, focused, size }) => {
                    let icon;
                    if (route.name === "Map") {
                        icon = "map"
                        return <FontAwesome name={icon} size={28} color={color} />
                    } else if (route.name === "Settings") {
                        icon = "cog"
                        return <FontAwesome name={icon} size={28} color={color} />
                    }
                    return null
                },
                tabBarShowLabel: false,
                tabBarIconStyle: {},
                tabBarStyle: [{ 
                  display: "flex",
                  bottom: 20,
                  elevation: 5,
                  borderRadius: 10,
                  marginLeft: 10,
                  marginRight: 10,
                  height: 60
                 }, null],
                tabBarActiveTintColor: "#000000"
            })}
        >
        <Tab.Screen name="Map" component={HomeScreen}  />
        <Tab.Screen
  name="Plus"
  component={HomeScreen}
  options={{
    tabBarIcon: ({ focused }) => (
      <Image source={require('./assets/plus.png')} resizeMode='contain' style={{
        width: 30,
        height: 30
      }} />
    ),
    tabBarButton: (props) => {
      return <CustomTabBarButton {...props} />
    }
  }}
/>
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  shadow: {
    shadowColor: '#000000',
    shadowOffset: {
      width: 0,
      height: 10
    },
    shadowOpacity: 0.2,
    shadowRadius: 3.5,
    elevation: 5
  },
  container: {
    flex: 1
  },
  map: {
    width: '100%',
    height: '110%',
  },
  mapContainer: {
    height: '100%'
  }
});

Picture of problem:

Solution

Use absolute position for the tab bar style. This will put the tab bar on the top of other content.

tabBarStyle: {
  position: 'absolute',
  display: 'flex',
  bottom: 20,
  elevation: 5,
  borderRadius: 10,
  marginLeft: 10,
  marginRight: 10,
  height: 60,
}

Answered By - user18309290