Header

Headers are navigation components that display information and actions relating to the current screen. Note: Make sure that you have completed Step 3 in the setup guide before using Header.

Usage

Import

import { Header } from '@rneui/themed';

Theme Key

Header

Note: Make sure that you have completed Step 3 in the setup guide before using Header.

Headers are navigation components that display information and actions relating to the current screen.

LinearGradient Usage

Using LinearGradient in React Native Elements is supported through the react-native-linear-gradient package. If you're using expo or create-react-native-app then you can use linearGradientProps prop right out the box with no additional setup.

For react-native-cli users, make sure to follow the installation instructions and use it like this:

import { Header } from '@rneui/themed';
import LinearGradient from 'react-native-linear-gradient';

...

<Header
  ViewComponent={LinearGradient} // Don't forget this!
  linearGradientProps={{
    colors: ['red', 'pink'],
    start: { x: 0, y: 0.5 },
    end: { x: 1, y: 0.5 },
  }}
/>

Props

note

Includes all View props.

Name	Type	Default	Description
ViewComponent	React Component	View	Component for container.
backgroundColor	string		Sets backgroundColor of the parent component.
backgroundImage	ImageSourcePropType		Sets backgroundImage for parent component.
backgroundImageStyle	ImageStyle		Styling for backgroundImage in the main container.
barStyle	StatusBarStyle		Sets the color of the status bar text.
centerComponent	HeaderSubComponent		Define your center component here.
centerContainerStyle	View Style		Styling for container around the centerComponent.
children	(Element | Element[]) & ReactNode	[]	Add children component to the header.
containerStyle	View Style		Styling around the main container.
edges	Edge[]	['left', 'top', 'right']	SafeAreaView edges control.
elevated	boolean		Elevation for header
hideStatusBar	Boolean	false	Accepts all props for StatusBar.
leftComponent	HeaderSubComponent		Define your left component here.
leftContainerStyle	View Style		Styling for container around the leftComponent.
linearGradientProps	Object		Displays a linear gradient. See usage.
placement	center | left | right	center	Alignment for title.
rightComponent	HeaderSubComponent		Define your right component here.
rightContainerStyle	View Style		Styling for container around the rightComponent.
statusBarProps	StatusBarProps		Accepts all props for StatusBar.

Playground