Header
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.
Usage
Header with default components
For quick setup we provide default components, which are React Native Elements Icon for left/right buttons and React Native Text for title. You can customize them with configuration objects passed in as props.
<Header
leftComponent={{ icon: 'menu', color: '#fff', iconStyle: { color: '#fff' } }}
centerComponent={{ text: 'MY TITLE', style: { color: '#fff' } }}
rightComponent={{ icon: 'home', color: '#fff' }}
/>
Left aligned center component
<Header
placement="left"
leftComponent={{ icon: 'menu', color: '#fff' }}
centerComponent={{ text: 'MY TITLE', style: { color: '#fff' } }}
rightComponent={{ icon: 'home', color: '#fff' }}
/>
Header with custom components passed in through props
You can pass in your custom components like this too.
<Header
leftComponent={<MyCustomLeftComponent />}
centerComponent={<MyCustomCenterComponent />}
rightComponent={<MyCustomRightComponent />}
/>
Header with mixed components
You can also mix the content, for example you can have default components defined by configuration combined with custom components. Passing a render function that returns a React Element is valid too.
<Header
leftComponent={<MyCustomLeftComponent />}
centerComponent={this.renderCenterComponent()}
rightComponent={{ icon: 'home', style: { color: '#fff' } }}
/>
Header with custom components passed in as children
<Header>
<MyCustomLeftComponent />
<MyCustomCenterComponent />
<MyCustomRightComponent />
</Header>
Component precedence
Components defined through children take precedence over components passed in as props, so in this case <MyCustomLeftComponent>
will be rendered instead of leftComponent={{ icon: 'menu' }}
.
<Header leftComponent={{ icon: 'menu' }}>
<MyCustomLeftComponent />
<MyCustomCenterComponent />
<MyCustomRightComponent />
</Header>
Header customisability
We wanted the Header to be as customisable as possible, so you are free to try
different combinations of props. For example, if you want to change the left,
center, or right component's layout, you can adjust the containerStyle
<Header
statusBarProps={{ barStyle: 'light-content' }}
barStyle="light-content" // or directly
leftComponent={<MyCustomLeftComponent />}
centerComponent={{ text: 'MY TITLE', style: { color: '#fff' } }}
containerStyle={{
backgroundColor: '#3D6DCC',
justifyContent: 'space-around',
}}
/>
Props
backgroundColor
backgroundImage
backgroundImageStyle
barStyle
centerComponent
centerContainerStyle
containerStyle
leftComponent
leftContainerStyle
linearGradientProps
placement
elevated
rightComponent
rightContainerStyle
statusBarProps
ViewComponent
Reference
backgroundColor
sets backgroundColor of the parent component
Type | Default |
---|---|
string | none |
backgroundImage
sets backgroundImage for parent component
Type | Default |
---|---|
object (image) | none |
backgroundImageStyle
styling for backgroundImage in the main container
Type | Default |
---|---|
style | none |
elevated
elevation for header
Type | Default |
---|---|
boolean | false |
barStyle
Sets the color of the status bar text.
Type | Default |
---|---|
'default', 'light-content', 'dark-content' | 'default' (source) |
centerComponent
define your center component here
Type | Default |
---|---|
{ text: string, ...Text props} OR { icon: string, ...Icon props} OR React element or component | none |
centerContainerStyle
styling for container around the centerComponent
Type | Default |
---|---|
style | { flex: 3 } |
containerStyle
styling around the main container
Type | Default |
---|---|
style | none |
leftComponent
define your left component here
Type | Default |
---|---|
{ text: string, ...Text props} OR { icon: string, ...Icon props} OR React element or component | none |
leftContainerStyle
styling for container around the leftComponent
Type | Default |
---|---|
style | { flex: 1 } |
linearGradientProps
displays a linear gradient. See usage.
Type | Default |
---|---|
{...Gradient props} | none |
placement
Alignment for title
Type | Default |
---|---|
'left', 'center' or 'right' | 'center' |
rightComponent
define your right component here
Type | Default |
---|---|
{ text: string, ...Text props} OR { icon: string, ...Icon props} OR React element or component | none |
rightContainerStyle
styling for container around the rightComponent
Type | Default |
---|---|
style | { flex: 1 } |
statusBarProps
accepts all props for StatusBar
Type | Default |
---|---|
{ ...StatusBar props } | none |
ViewComponent
component for container
Type | Default |
---|---|
React Native Component | ImageBackground |
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 },
}}
/>