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 |