I am currently facing an issue where my map screen is not covering the whole screen, leaving a blank space at the bottom where the custom bottom navigator should be displayed. How can I adjust my code so that the map covers this blank space at the bottom?
Here is 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%', /* Adjusted to show full screen */
},
mapContainer: {
height: '100%' /* Height adjusted to cover empty space */
}
});
Picture of problem: