Skip to main content
Version: Bleeding Edge 🚧

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.

Import

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

Usage

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.

NameTypeDefaultDescription
ViewComponentReact ComponentViewComponent for container.
backgroundColorstringSets backgroundColor of the parent component.
backgroundImageImageSourcePropTypeSets backgroundImage for parent component.
backgroundImageStyleImageStyleStyling for backgroundImage in the main container.
barStyleStatusBarStyleSets the color of the status bar text.
centerComponentHeaderSubComponentDefine your center component here.
centerContainerStyleView StyleStyling for container around the centerComponent.
children(Element | Element[]) & ReactNode[]Add children component to the header.
containerStyleView StyleStyling around the main container.
elevatedbooleanElevation for header
leftComponentHeaderSubComponentDefine your left component here.
leftContainerStyleView StyleStyling for container around the leftComponent.
linearGradientPropsObjectDisplays a linear gradient. See usage.
placementcenter | left | rightcenterAlignment for title.
rightComponentHeaderSubComponentDefine your right component here.
rightContainerStyleView StyleStyling for container around the rightComponent.
statusBarPropsStatusBarPropsAccepts all props for StatusBar.

Playground