How can I set the header height in React Navigation?

Question

It seems like except backgroundColor nothing else has an effect in headerStyle.

 const defaultNavOptions = {
  headerBackTitle: 'Back',
  headerStyle: {
    backgroundColor: colors.secondary,
    height: 100,
  },

Then I'm passing the options:

 <Stack.Navigator
      initialRouteName={'Home'}
      screenOptions={({ navigation }) => ({
        ...defaultNavOptions,
        headerLeft: () => (
          <Icon
            name="menu-open"
            size={30}
            color={colors.primary}
            onPress={() => navigation.openDrawer()}
          />
        ),
      })}
    >

Am I doing something wrong?
Is there a way to set the height for the header?
Thanks in advance.

score 0 · Answer 1 · answered Dec 20 '21 at 10:06

0

<Stack.Navigator
      initialRouteName={'Home'}
      screenOptions={({ navigation }) => ({
        headerStyle: { backgroundColor: 'tomato', height: 100 },
        headerLeft: () => (
          <Icon
            name="menu-open"
            size={30}
            color={colors.primary}
            onPress={() => navigation.openDrawer()}
          />
        ),
      })}
    >

answered Dec 20 '21 at 10:06

John Ocean

394
2
14

1

Hi @John! Just like defaultNavOptions, this has also no effect! – Fotios Tsakiris Dec 20 '21 at 13:59

score -1 · Answer 2 · answered Dec 20 '21 at 16:46

-1

I've found that using the options param on a per screen basis rather than for the whole navigator picks up the headerStyle etc

const defaultNavigationOptions = {
    headerBackTitle: 'Back',
    headerStyle: {
        backgroundColor: colors.secondary,
        height: 100,
    }
}
<Stack.Navigator initialRouteName={'Home'}>
    <Stack.Screen
        name="Home"
        component={Home}
        options={defaultNavigationOptions}
    />
    <Stack.Screen
        name="ScreenWithHeaderLeft"
        component={ScreenWithHeaderLeft}
        options={{
            ...defaultNavigationOptions,
            headerLeft: () => <Icon name="menu-open" size={30} color={colors.primary} />,
        }}
    />
</Stack.Navigator>

answered Dec 20 '21 at 16:46

P. Brew

734
4
12

Hi @Brew, I don't know if you noticed, but I use v6, not v5, and `options` is now `screenOptions`. Further I don't really see any difference between your code and mine. Thanks – Fotios Tsakiris Dec 20 '21 at 19:15
1

Hi @FotiosTsakiris. The difference is that I am setting the options on a per screen basis using the `options` parameter which is correct whereas you're setting them one level higher in the Navigator itself which does take `screenOptions`. But like yourself I had issues configuring the header your way and found my way worked. See documentation for screen `options` on V6: https://reactnavigation.org/docs/screen#options – P. Brew Dec 21 '21 at 11:40
1

OK Brew, sorry for the overlook. You are right about `options` but it still doesn't work. – Fotios Tsakiris Dec 21 '21 at 15:08
Doesn't work on v6 – Butri Aug 19 '23 at 10:31

How can I set the header height in React Navigation?

2 Answers2