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