React Native Top Area View-CodePudding

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

CodePudding user response：

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.

CodePudding user response：

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