React Navigation 5 no header prop? Custom header component

Question

How do you implement a custom header component in React Navigation 5?

There is a variable for header, but assigning a component to it doesn't show anything, do you need to assign headerLeft, headerTitle and headerRight for every screen?

        <Stack.Screen name="IndexScreen" component={IndexScreen}
          options={{
            header: () => <HeaderComponent /> 
          }} /> //shows nothing

        <Stack.Screen name="IndexScreen" component={IndexScreen}
          options={{
            headerLeft: () => <HeaderLeftComponent />, 
            headerTitle: () => <HeaderTitleComponent />, 
            headerRight: () => <HeaderRightComponent /> // to much repetition
          }} />

What does your HeaderComponent look like, because it's working for me. Creating a snack might also be a good idea, to make it easier to debug. — bas
– bas, Commented Jul 30, 2020 at 11:46
@Bas I managed to get a custom component to work as a header and made a snack: snack.expo.io/@johanmelin/4c7d80. Now I'm just curious how I can get all the header logic into this component, like headerRight: () => <View> — fuzz
– fuzz, Commented Jul 30, 2020 at 12:37
Simple creating an object with the settings doesn't work <Stack.Screen options={{ HeaderSettings }} /> const HeaderSettings = { header: HeaderComponent } — fuzz
– fuzz, Commented Jul 30, 2020 at 13:29
I can get both settings and header component to work, but not both at the same time. options={{ ...HeaderSettings, header: props => <HeaderComponent {...props} />, }} — fuzz
– fuzz, Commented Jul 30, 2020 at 14:20

Rafael Tavares · Accepted Answer · 2022-02-03 11:07:37Z

2

You can use the header attribute in screenOptions prop from Stack.Navigator (if it is a common header):

<Stack.Navigator
  screenOptions={{
    header: YourHeader
  }}
>
  // ...
</Stack.Navigator>

Or header attribute in options from Stack.Screen for each screen:

<AppStack.Screen
  name='YourScreen'
  component={YourComponent}
  options={{ header: YourHeader }}
/>

If your header is not showing up, probably the Screen is rendering something with a higher zIndex or elevation.

The docs says which props the header component receives, but you can also check it on the types file (on GitHub), search for StackHeaderProps.

edited Feb 3, 2022 at 11:07

answered Jul 30, 2020 at 11:49

Rafael Tavares

6,5524 gold badges38 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Navigation 5 no header prop? Custom header component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related