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 |