React Native Top Area View - react-native

Question

I'm new to React Native and I have a very simple first page that I'm testing out. My only thing I'm having a hard time understanding is where there is a Title view at the top area. Here's what my app currently looks like https://i.stack.imgur.com/H7vbO.png As you can see, there's that huge white space that has "Home" in it. I'm trying to get rid of it completely and just have the my background color throughout the whole thing. My only problem is that I don't even know where that is coming from. Here is my code and thank you.
This is my HomeScreen
import React from "react";
import { StyleSheet, Text, SafeAreaView, Platform } from "react-native";
import { StatusBar } from "expo-status-bar";
const HomeScreen = ({}) => {
return (
<SafeAreaView style={styles.container}>
<Text style={{ color: "white" }}>Home Screen</Text>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#4B4B4B",
alignItems: "center",
paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
},
});
export default HomeScreen;
This is my App.js
import React from "react";
import { NavigationContainer } from "#react-navigation/native";
import { createNativeStackNavigator } from "#react-navigation/native-stack";
import MainTabScreen from "./screens/MainTabScreen";
const Stack = createNativeStackNavigator();
const App = () => {
return (
<NavigationContainer>
<MainTabScreen />
</NavigationContainer>
);
};
export default App;
Here is my MainTabScreen
import React from "react";
import { createBottomTabNavigator } from "#react-navigation/bottom-tabs";
import Icon from "react-native-vector-icons/Ionicons";
import HomeScreen from "./HomeScreen";
import SearchScreen from "./SearchScreen";
import InboxScreen from "./InboxScreen";
import AccoutScreen from "./AccountScreen";
const Tab = createBottomTabNavigator();
const MainTabScreen = () => {
return (
<Tab.Navigator initialRouteName="Home" activeColor="#000000">
<Tab.Screen
name="Home"
component={HomeScreen}
options={{
tabBarIcon: ({ color }) => (
<Icon name="ios-home" color={color} size={26} />
),
}}
/>
<Tab.Screen
name="Search"
component={SearchScreen}
options={{
tabBarIcon: ({ color }) => (
<Icon name="ios-search" color={color} size={26} />
),
}}
/>
<Tab.Screen
name="Inbox"
component={InboxScreen}
options={{
tabBarIcon: ({ color }) => (
<Icon name="ios-chatbox" color={color} size={26} />
),
}}
/>
<Tab.Screen
name="Account"
component={AccoutScreen}
options={{
tabBarIcon: ({ color }) => (
<Icon name="ios-person" color={color} size={26} />
),
}}
/>
</Tab.Navigator>
);
};
export default MainTabScreen;
P.S.: I already tried changing SafeAreaView to just View, and I also try removing the padding top

Answer 1

That view is actually the header of the navigator. Thus, to remove it, on your main navigator, set headerShown: false.
In your mainTabScreen;
<Tab.Navigator screenOptions={{headerShown: false}} initialRouteName="Home" activeColor="#000000">
...
Rest will be same.

Answer 2

Bottom tab accepts header related options in options property of Navigator Screens and screenOptions property in The Navigator Component
e.g
const MainTabScreen = () => {
return (
<Tab.Navigator
initialRouteName="Home"
activeColor="#000000"
// To remove header from all screens,
// screenOptions={{ headerShown: false }}
>
<Tab.Screen
name="Home"
component={Home}
options={{
tabBarIcon: ({ color }) => (
<Icon name="ios-home" color={color} size={26} />
),
// Update Header Title
// headerTitle: 'NOT A HOME',
}}
/>
<Tab.Screen
name="Search"
component={Home}
options={{
tabBarIcon: ({ color }) => (
<Icon name="ios-search" color={color} size={26} />
),
}}
/>
</Tab.Navigator>
);
};
You can read about all header related options in - https://reactnavigation.org/docs/elements#header