Native Base Menu affecting Safe Area when opened

Question

I need help with a Native Base behavior. Image 1 is the normal Safe Area, however when I open the Menu from Native Base, the "text" from Safe Area turns white. Can anyone tell me what could be causing this?

The relevant codes are below:

App()

import React from "react";
import Routes from "./src/screens/routes";
import { NativeBaseProvider } from "native-base";

export default function App() {

  return (
    <>
      <NativeBaseProvider>
        <Routes />
      </NativeBaseProvider>
    </>
  );
}

Routes

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { DefaultTheme, NavigationContainer } from "@react-navigation/native";
import React, { useState } from "react";
import CameraScreen from "./CameraScreen/CameraScreen";
import DatabaseScreen from "./DatabaseScreen/DatabaseScreen";
import HomeScreen from "./HomeScreen/HomeScreen";
import { Ionicons } from "@expo/vector-icons";

const Tab = createBottomTabNavigator();

export default function Routes() {
  const LightTheme = {
    ...DefaultTheme,
    colors: {
      ...DefaultTheme.colors,
      background: "#fff",
    },
  };

  return (
    <NavigationContainer theme={LightTheme}>
      <Tab.Navigator
        screenOptions={({ route }) => ({
          headerShown: false,
          tabBarActiveTintColor: "#fff",
          tabBarInactiveTintColor: "#e2e2e2",
          tabBarShowLabel: false,
          tabBarStyle: {
            paddingBottom: 5,
            backgroundColor: "#6db611",
            justifyItems: "center",
            height: 48,
          },
          tabBarIcon: ({ focused, color }) => {
            let iconName: any;
            if (route.name === "Home") {
              iconName = focused ? "home" : "home-outline";
            } else if (route.name === "Camera") {
              iconName = focused ? "camera" : "camera-outline";
            } else if (route.name === "Database") {
              iconName = focused ? "search" : "search-outline";
            }

            return <Ionicons name={iconName} size={24} color={color} />;
          },
        })}
      >
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Camera" component={CameraScreen} />
        <Tab.Screen name="Database" component={DatabaseScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

HomeScreen

import React from "react";
import { View } from "react-native";
import HeaderBar from "../../components/HeaderBar/HeaderBar";

export default function HomeScreen({navigation}:any) {
  return (
    <>
      <View style={{ backgroundColor: "#f2f2f2", borderBottomLeftRadius: 64, paddingBottom: 8 }}>
        <HeaderBar />
        ...
      </View>
      ...
    </>
  );
}

HeaderBar

import { faEllipsisVertical } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { Ionicons } from "@expo/vector-icons";
import React from "react";
import { Image, Pressable, TouchableOpacity, View } from "react-native";
import { Container, Logo, LogoIcon } from "./headerBar-style";
import { Menu } from "native-base";

const HeaderBar = () => {
  return (
    <>
      <Container>
        <View
          style={{
            flexDirection: "row",
            alignItems: "center",
            marginBottom: 4,
          }}
        >
          <LogoIcon source={require("../../../assets/icons/logo.png")} />
          <Logo>AppName</Logo>
        </View>
        <View style={{ flexDirection: "row", alignItems: "center" }}>
          <TouchableOpacity style={{ marginRight: 24, marginBottom: 14 }}>
            <Ionicons name="notifications" size={24} color="#6db611" />
          </TouchableOpacity>
          <Menu
            shouldOverlapWithTrigger
            trigger={(triggerProps) => {
              return (
                <Pressable {...triggerProps} style={{ marginRight: 16, marginBottom: 14 }}>
                  <FontAwesomeIcon
                    size={24}
                    color="#6db611"
                    icon={faEllipsisVertical}
                  />
                </Pressable>
              );
            }}
          >
            <Menu.Item>About</Menu.Item>
            <Menu.Item>Contact</Menu.Item>
            <Menu.Item>Configuration</Menu.Item>
          </Menu>
        </View>
      </Container>
      <Image
        source={require("../../../assets/images/img.header-border.png")}
        style={{ marginTop: -68, zIndex: -1 }}
      />
    </>
  );
};

export default HeaderBar;

HeaderBar-style

import styled from "styled-components/native";

export const Container = styled.View`
  flex-direction: row;
  height: 80px;
  width: 100%;
  background-color: #fff;
  justify-content: space-between;
  align-items: flex-end;
`;

...

I changed the style of other components and even the custom theme but it didn't solve it. In the doc example of Native Base it works perfectly.