Extra gap at the top of screen in React Native DrawerNavigator

Question

Problem Description

I’m using a DrawerNavigator in my React Native project (built with Expo), but there is an extra gap at the top of the screen. I’ve checked for possible issues with the header, SafeAreaView, and StatusBar, but I’m still unable to eliminate the extra space.

1. I’ve made sure to remove SafeAreaView from the code wherever it appeared.
2. I’ve tried setting headerShown: false and hiding the StatusBar, but neither seems to resolve the problem.

DrawerNavigator.tsx

 return (
    <Drawer.Navigator
      initialRouteName="LocationNavigator"
      screenOptions={{
        headerLeft: () => <HamburgerButton />,
        headerRight: () => <UserButton />,
        headerShown: false,
        headerStyle: {
          backgroundColor: 'salmon',
        },
      }}
      
      drawerContent={(props) => <TopologyNavigator {...props} />}
    >
      <Drawer.Screen name="LocationStack" component={LocationStack} options={{ title: navigatorState?.name, headerShown: true, }} />
      <Drawer.Screen name="AssetStack" component={AssetStack} options={{ title: navigatorState?.name }} />
      <Drawer.Screen name="MeasureNavigator" component={MeasureNavigator} options={{ title: navigatorState?.name }} />
      <Drawer.Screen
        name="IntellicheckNavigator"
        component={IntellicheckNavigator}
        options={{ title: navigatorState?.name }}
      />
    </Drawer.Navigator>
  );

RootNavigator.tsx

import { useNavigation } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import React, { useEffect } from "react";
import { StyleSheet } from "react-native";
import { setupAxiosInterceptors } from "../api/data";
import DrawerNavigator from "./DrawerNavigator";
import LoginNavigator from "./LoginNavigator";
import { Header } from "react-native/Libraries/NewAppScreen";

const Stack = createNativeStackNavigator();

const RootNavigator = (): React.ReactElement => {
  const navigation = useNavigation();

  useEffect(() => {
    setupAxiosInterceptors(navigation);
  }, [navigation]);

  return (
    <Stack.Navigator headerMode="none" 
    screenOptions={{ headerShown: false}} 
    initialRouteName="LoginNavigator">
      <Stack.Screen options={{ headerShown: false }} name="LoginNavigator" component={LoginNavigator} />
      <Stack.Screen options={{ headerShown: false }} name="DrawerNavigator" component={DrawerNavigator} />
    </Stack.Navigator>
  );
};

export default RootNavigator;

const styles = StyleSheet.create({
});