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