Passing props to react navigation drawer custom header

Question

How can I pass arguments to the following custom react navigation drawer header 'NavHeader'? I want to include an icon inside the NavHeader that uses the following: navigation.dispatch(DrawerActions.openDrawer())

function NavHeader(props) {
    return <View>...</View>;
}

<Stack.Navigator
  initialRouteName="Page1"
  screenOptions={{
    headerShown: true,
    headerTransparent:false,
    header: NavHeader
  }}
>
     <Stack.Screen name="Page1" component={Page1} />
     <Stack.Screen name="Page2" component={Page2} />
</Stack.Navigator>

Abe · Accepted Answer · 2023-06-29 19:58:45Z

2

The navigation object is in the props that get passed to NavHeader. Javascript syntax is hiding the arguments that get passed to your header; when passing a function, writing

header: myFunction

is the same as writing

header: (args) => myFunction(args).

In other words, your screenOptions could be rewritten like this:

  screenOptions={{
    // ...
    header: ({ navigation }) => <NavHeader navigation={navigation} />,

This is why you can use the navigation object inside the NavHeader component. In your current NavHeader code, you can call it with props.navigation.

Full props that get passed to the header:

export type StackHeaderProps = {
  /**
   * Layout of the screen.
   */
  layout: Layout;
  /**
   * Options for the back button.
   */
  back?: {
    /**
     * Title of the previous screen.
     */
    title: string;
  };
  /**
   * Animated nodes representing the progress of the animation.
   */
  progress: SceneProgress;
  /**
   * Options for the current screen.
   */
  options: StackNavigationOptions;
  /**
   * Route object for the current screen.
   */
  route: Route<string>;
  /**
   * Navigation prop for the header.
   */
  navigation: StackNavigationProp<ParamListBase>;
  /**
   * Interpolated styles for various elements in the header.
   */
  styleInterpolator: StackHeaderStyleInterpolator;
};

answered Jun 29, 2023 at 19:58

Abe

5,6082 gold badges18 silver badges28 bronze badges

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

1 Comment

varinme Over a year ago

Thank you for such a good explanation and detailed answer, this is awesome!

Collectives™ on Stack Overflow

Passing props to react navigation drawer custom header

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related