React-Native V6 How to remove SafeArea from Bottom Tabs

Question

enter image description here

I am new to programming. I have make the Bottom Tab's position "absolute" and can't align my Tab Icons to center.

It seems like a SafeAreaView blocking the bottom half of the Bottom-Tab.

import React from "react";
import HomeScreen from "../scenes/HomeScreen";
import SearchScreen from "../scenes/SearchScreen";
import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Ionicons } from "@expo/vector-icons";

const Tab = createBottomTabNavigator();

export default function MyTab() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={{
          tabBarShowLabel: true,
          headerShown: false,
          tabBarStyle: {
            borderTopColor: "#fff",
            position: "absolute",
            borderRadius: 24,
            elevation: 0,
            paddingHorizontal: 16,
            marginHorizontal: 24,
            paddingTop: 16,
            height: 72,
            bottom: 24,
            backgroundColor: "#fff",
          },
        }}
      >
        <Tab.Screen
          name="Home"
          component={HomeScreen}
          options={{
            tabBarIcon: ({ focused }) => (
              <Ionicons name={"home-outline"} size={24}></Ionicons>
            ),
          }}
        />
        <Tab.Screen name="Search" component={SearchScreen} />
        <Tab.Screen name="Store" component={HomeScreen} />
        <Tab.Screen name="Insight" component={HomeScreen} />
        <Tab.Screen name="Settings" component={HomeScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Answer 1

SafeAreaView must be imported in the same place you use it. And have you already tried to encapsulate SafeAreaView around the others imports ? like :

<SafeAreaView>
     <NavigationContainer>
        <Tab.Navigator>
        (.....)
        </Tab.Navigator>
    </NavigationContainer>
</SafeAreaView>

Or, in the main file:

<SafeAreaView>
    <Header>
   
    <MyTab>
</SafeAreaView>

Just to remember that work on sometime in a different way (OS devices Appel versus Android) depending the way you import it. Usually, you need to import it, one time only.