Setting height on Stack header

[stefanahman]

Hello,

I'm switching from react-navigation to expo-router and having problem with specifying header height on my stack header.

react-navigation has support for this and expo-router when it comes to Tabs.

Error:

Type '{ height: number; }' is not assignable to type 'StyleProp<{ backgroundColor?: string | undefined; }>'.
  Object literal may only specify known properties, and 'height' does not exist in type '{ backgroundColor?: string | undefined; } | RecursiveArray<Falsy | { backgroundColor?: string | undefined; } | RegisteredStyle<{ backgroundColor?: string | undefined; }>>'.ts(2322)

headerStyle for Stack:

(property) headerStyle?: React.StyleProp<{
    backgroundColor?: string | undefined;
}>

headerStyle for Tabs:

(property) headerStyle?: false | React.RegisteredStyle<React.ViewStyle> | React.Animated.Value | React.Animated.AnimatedInterpolation<string | number> | React.Animated.WithAnimatedObject<React.ViewStyle> | React.Animated.WithAnimatedArray<...> | null | undefined

Any idea how to do this or why it has been removed in expo-router?

[maurim96]

+1

[ASHFAQPATWARI]

+1

[brandeddavid]

Having the same issue. @stefanahman were you able to work around it?

[stefanahman]

unfortunately, I ended up making the header buttons smaller and not changing the height on the stack header.

[andreasbroch2]

I did a custom header and set it under the header options like this:

header: () => (
            <XStack
              height={Platform.OS === "android" ? 80 : 100}
              backgroundColor="white"
              borderBottomWidth={1}
              borderColor={borderColor}
              alignItems="center"
              paddingTop={insets.top}
              paddingHorizontal={16}
              justifyContent="space-between"
            >
              <View width={50}>
            <BackButton
              onPress={() => {
                router.back();
              }}
            />
            </View>
            <Text fontWeight={'600'} fontSize={18}>{t("profile.yourProfile")}</Text>
            <View width={50} />
            </XStack>

          ),

[zeeshanalico]

same issue

[masoomahmad]

Same issue

[andreasbroch2]

+1

[shadeemerhi]

Same issue. Pretty frustrating that this is still an issue

[samsuchin]

+1

[ahmad-elafify-pci]

+1

[FeMaffezzolli]

+1

[amiraabdelmalek]

+1

[samsuchin]

Pretty frustrating so many people experiencing same issue. I had to switch to a JSstack but would prefer the native stack.

[mayone-du]

+1

[mrstebo]

Here is an example of how I worked around this issue. Basically I used the headerTransparent property so that the content overlays the header. Then used the contentStyle to add padding to the content to shift it down slightly.

FYI, I am using NativeWind to add className to my React Native components, so I am using the h-14 class to set the height in this example, but this could easily be replaced with Stylesheet.create and inline styles.

import { Stack, useRouter } from "expo-router";
import { styled } from "nativewind";
import { View } from "react-native";

import { NotificationButtonContainer } from "@/features/notifications/components";
import { IconButton } from "@/features/shared/components";

const StyledView = styled(View);

export default function HomeStack() {
  const router = useRouter();

  return (
    <Stack
      screenOptions={{
        headerTintColor: "white",
        headerBackground: () => <StyledView className="h-14 bg-primary" />,
        headerTransparent: true,
        headerLeft: () => (
          <IconButton iconName="arrow-left" onPress={() => router.back()} />
        ),
        headerRight: () => <NotificationButtonContainer />,
        contentStyle: { paddingTop: 50 },
      }}
    >
      <Stack.Screen
        name="index"
        options={{
          title: "Home",
        }}
      />
    </Stack>
  );
}

I hope that helps 🙏

[dmarcucci]

So incredibly unintuitive, but it works.

Thanks.

[Ctorum]

+1

[abduraufsherkulov]

+1