Skip to main content
Version: 4.0.0-beta.0

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

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 'react-native-elements';
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

Reference

Header

ViewComponent

Component for container.

TypeDefault
React ComponentImageBackground or View Component

backgroundColor

Sets backgroundColor of the parent component.

TypeDefault
stringNone

backgroundImage

Sets backgroundImage for parent component.

TypeDefault
ImageSourcePropTypeNone

backgroundImageStyle

Styling for backgroundImage in the main container.

TypeDefault
ImageStyleNone

barStyle

Sets the color of the status bar text.

TypeDefault
StatusBarStyleNone

centerComponent

Define your center component here.

TypeDefault
anyNone

centerContainerStyle

Styling for container around the centerComponent.

TypeDefault
View style(Object)None

children

Add children component to the header.

TypeDefault
(Element or Element[]) and ReactNode[]

containerStyle

Styling around the main container.

TypeDefault
View style(Object)None

elevated

Elevation for header

TypeDefault
booleanNone

leftComponent

Define your left component here.

TypeDefault
anyNone

leftContainerStyle

Styling for container around the leftComponent.

TypeDefault
View style(Object)None

linearGradientProps

Displays a linear gradient. See usage.

TypeDefault
ObjectNone

placement

Alignment for title.

TypeDefault
"center" or "left" or "right"center

rightComponent

Define your right component here.

TypeDefault
anyNone

rightContainerStyle

Styling for container around the rightComponent.

TypeDefault
View style(Object)None

statusBarProps

Accepts all props for StatusBar.

TypeDefault
StatusBarPropsNone