Header

Header component with title, back button, and actions

Header component for displaying page titles, navigation, and action buttons. Includes back button, avatar support, and action menu.

Basic Usage#

Interactive Preview

9:41

Home Screen

Page Content Placeholder

Props#

Prop	Type	Default	Required	Description
`title`	`string`	—	✓	Header title text
`showBack`	`boolean`	`false`	—	Show back button
`onBackPress`	`() => void`	—	—	Back button callback
`backIcon`	`ReactNode`	—	—	Custom back icon
`avatar`	`ReactNode`	—	—	Avatar/image element
`titlePosition`	`'left' \| 'center' \| 'right'`	`'left'`	—	Title alignment
`actions`	`HeaderAction[]`	—	—	Action buttons array
`backgroundColor`	`string`	—	—	Custom header background color
`borderColor`	`string`	—	—	Custom bottom border color
`backButtonBackgroundColor`	`string`	—	—	Background of the back button
`backIconColor`	`string`	—	—	Color of the back icon
`actionIconColor`	`string`	—	—	Color of action icons
`style`	`ViewStyle`	—	—	Main container styles
`titleStyle`	`TextStyle`	—	—	Title text styles
`backButtonStyle`	`ViewStyle`	—	—	Back button container styles

HeaderAction#

Prop	Type	Default	Required	Description
`icon`	`ReactNode`	—	✓	Action icon
`onPress`	`() => void`	—	✓	Action callback
`badge`	`number \| string`	—	—	Badge number/text

Examples#

With Back Button#

<Header
  title="Details"
  showBack={true}
  onBackPress={() => navigation.goBack()}
/>

<Header
  title="Details"
  showBack={true}
  onBackPress={() => navigation.goBack()}
/>

With Actions#

import { MoreVertical, Share } from 'lucide-react-native'

<Header
  title="Post"
  showBack={true}
  onBackPress={() => {}}
  actions={[
    {
      icon: <Share size={20} />,
      onPress: () => console.log('Share'),
    },
    {
      icon: <MoreVertical size={20} />,
      onPress: () => console.log('More'),
    },
  ]}
/>

import { MoreVertical, Share } from 'lucide-react-native'

<Header
  title="Post"
  showBack={true}
  onBackPress={() => {}}
  actions={[
    {
      icon: <Share size={20} />,
      onPress: () => console.log('Share'),
    },
    {
      icon: <MoreVertical size={20} />,
      onPress: () => console.log('More'),
    },
  ]}
/>

With Avatar and Centered Title#

<Header
  title="Profile"
  titlePosition="center"
  avatar={<Image source={require('./avatar.png')} />}
  actions={[
    {
      icon: <Settings size={20} />,
      onPress: () => {},
    },
  ]}
/>

<Header
  title="Profile"
  titlePosition="center"
  avatar={<Image source={require('./avatar.png')} />}
  actions={[
    {
      icon: <Settings size={20} />,
      onPress: () => {},
    },
  ]}
/>

With Badge#

<Header
  title="Messages"
  actions={[
    {
      icon: <Bell size={20} />,
      badge: '5',
      onPress: () => {},
    },
  ]}
/>

<Header
  title="Messages"
  actions={[
    {
      icon: <Bell size={20} />,
      badge: '5',
      onPress: () => {},
    },
  ]}
/>

Custom Back Icon#

import { X } from 'lucide-react-native'

<Header
  title="Modal"
  showBack={true}
  backIcon={<X size={24} />}
  onBackPress={() => {}}
/>

import { X } from 'lucide-react-native'

<Header
  title="Modal"
  showBack={true}
  backIcon={<X size={24} />}
  onBackPress={() => {}}
/>