header.md

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' }}
  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 props take precedence over components passed in as children, so in this case only the left component with icon set to home will be rendered.

<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 innerContainerStyles

<Header
  statusBarProps={{ barStyle: 'light-content' }}
  leftComponent={<MyCustomLeftComponent />}
  centerComponent={{ text: 'MY TITLE', style: { color: '#fff'} }}
  outerContainerStyles={{ backgroundColor: '#3D6DCC' }}
  innerContainerStyles={{ justifyContent: 'space-around',}}
/>

Header Props

prop	default	type	description
statusBarProps	none	object (props)	accepts all props for StatusBar
leftComponent	none	configuration object for default component (icon: string, ...props for React Native Elements Icon) or a valid React Element	define your left component here
centerComponent	none	configuration object for default component (text: string, ...props for React Native Text component) valid React Element	define your center component here
rightComponent	none	configuration object for default component (icon: string, ...props for React Native Elements Icon component) or a valid React Element	define your right component here
backgroundColor	none	string	sets backgroundColor of the parent component
outerContainerStyles	source	object (style)	styling for outer container
innerContainerStyles	source	object (style)	styling for inner container