Changing height of Header in React Native Stack Navigator doesn't work

Question

I am trying to change the style of the header of a Stack Navigator and everything works fine except the height property. I am also nesting the Stack Navigator inside a Drawer Navigator. When I change the height of its header, everything works fine.

I tested it on my AVD and iPhone with Expo Go and it doesn't work. In the web browser, it works fine.

Both headers should have the same height (150px)

Drawer:

import React from "react";
import { createDrawerNavigator } from "@react-navigation/drawer";
import { NavigationContainer } from "@react-navigation/native";

import HomeStack from "./HomeStack";
import AboutStack from "./AboutStack";

const DrawerNavigator = createDrawerNavigator();

export default function Drawer() {
    return (
        <NavigationContainer>
            <DrawerNavigator.Navigator
                screenOptions={{
                    headerShown: true,
                    headerStyle: {
                        height: 150,
                    },
                }}
            >
                <DrawerNavigator.Screen name="HomeStack" component={HomeStack} />
                <DrawerNavigator.Screen name="AboutStack" component={AboutStack} />
            </DrawerNavigator.Navigator>
        </NavigationContainer>
    );
}

AboutStack:

import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import About from "../screens/About";

const Stack = createNativeStackNavigator();

export default function AboutStack() {
    return (
        <Stack.Navigator
            screenOptions={{
                headerStyle: {
                    height: 150,
                    backgroundColor: "#111",
                },
                headerTintColor: "#fff",
            }}
        >
            <Stack.Screen
                name="About"
                component={About}
                options={{
                    title: "About GameZone",
                }}
            />
        </Stack.Navigator>
    );
}

Answer 1

You can use this documentation https://reactnavigation.org/docs/headers/ .Also you can try

headerTitleStyle: {
            fontWeight: 'bold',
          }, 

for that purpose .