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

Header

• ViewComponent
• backgroundColor
• backgroundImage
• backgroundImageStyle
• barStyle
• centerComponent
• centerContainerStyle
• children
• containerStyle
• elevated
• leftComponent
• leftContainerStyle
• linearGradientProps
• placement
• rightComponent
• rightContainerStyle
• statusBarProps

Reference

Header

ViewComponent

Component for container.

Type	Default
React Component	ImageBackground or View Component

---

backgroundColor

Sets backgroundColor of the parent component.

Type	Default
string	None

---

backgroundImage

Sets backgroundImage for parent component.

Type	Default
ImageSourcePropType	None

---

backgroundImageStyle

Styling for backgroundImage in the main container.

Type	Default
ImageStyle	None

---

barStyle

Sets the color of the status bar text.

Type	Default
StatusBarStyle	None

---

centerComponent

Define your center component here.

Type	Default
any	None

---

centerContainerStyle

Styling for container around the centerComponent.

Type	Default
View style(Object)	None

---

children

Add children component to the header.

Type	Default
(Element or Element[]) and ReactNode	[]

---

containerStyle

Styling around the main container.

Type	Default
View style(Object)	None

---

elevated

Elevation for header

Type	Default
boolean	None

---

leftComponent

Define your left component here.

Type	Default
any	None

---

leftContainerStyle

Styling for container around the leftComponent.

Type	Default
View style(Object)	None

---

linearGradientProps

Displays a linear gradient. See usage.

Type	Default
Object	None

---

placement

Alignment for title.

Type	Default
"center" or "left" or "right"	center

---

rightComponent

Define your right component here.

Type	Default
any	None

---

rightContainerStyle

Styling for container around the rightComponent.

Type	Default
View style(Object)	None

---

statusBarProps

Accepts all props for StatusBar.

Type	Default
StatusBarProps	None

---