Is there a way to preventing an Expo React Native app from generating safe areas?

Question

I was testing my app with Expo Go, but when I tried to build a preview APK I had to install some dependencies that apparently are required from @react-navigation/native, such as react-native-safe-area-context. But now that everything with my build is working, there's a white space at the top of the screen consuming some of the space that is necessary for the sake of the UI.

Before build debug Now

So I went searching and I found on React Navigation docs that you can use useSafeAreaInsets hook to get the safe area dimensions or something, but when I console-log it it says that all of those insets have a value of 0.

I also tried to fit in every place I could think of inside and outside the root View of this page, but it didn't work.

Note: I'm at first testing only in Android.

Here's App.js function:

export default function App() {
    const [appIsReady, setAppIsReady] = useState(false)

    useEffect(() => {
        async function prepare() {
            try {
                await Font.loadAsync(customFonts)
            } catch (e) {
                console.warn(e)
            } finally {
                setAppIsReady(true)
            }
        }

        prepare()
    }, [])

    const onLayoutRootView = useCallback(async () => {
        if (appIsReady) {
            await SplashScreen.hideAsync()
        }
    }, [appIsReady])

    if (!appIsReady) {
        return null
    }

    return (
        <NavigationContainer onReady={onLayoutRootView}>
            <Stack.Navigator initialRouteName="Login">
                <Stack.Screen
                    name="Login"
                    component={LoginScreen}
                    options={{ headerShown: false }}
                ></Stack.Screen>
                <Stack.Screen
                    name="Navigation"
                    component={NavigationBar}
                    options={{ headerShown: false }}
                ></Stack.Screen>
                <Stack.Screen
                    name="Register"
                    component={RegisterScreen}
                    options={{ headerShown: false }}
                ></Stack.Screen>
                <Stack.Screen
                    name="NavigationBar"
                    component={NavigationBar}
                    options={{ headerShown: false }}
                ></Stack.Screen>
            </Stack.Navigator>
        </NavigationContainer>
    )
}

And here's the bit of Login that I suppose that may be relevant:

const width = Dimensions.get('screen').width
const height = Dimensions.get('screen').height

export default function Login() {
    return (
        <View
            style={styles.body}
        >
            <Header
                title="Acesse sua
conta."
                backgroundColor="#89D2DC"
                centerHeader
                style={{
                    paddingLeft: 30,
                    flexDirection: 'column',
                    alignItems: 'flex-start',
                }}
            ></Header>
            <View style={styles.content}>
                <View style={styles.main}>
                    <View style={styles.form}>
                        /* STUFF */
                    </View>
                </View>
            </View>
        </View>
    )
}

I used Login as an example, as this issue occurs in every single page of the app. Help would be appreciated.

PS: first question yaaay