Header.md

Header

• NativeBase component that renders as Header (navbar) for your screen.
• There can be a single Header component into your Container.
• To have Header for your screen, include <Header> component within <Container>.
• Header takes input as: Button and Title (Text)
• The components those are defined within <Header> will be rendered in the same order that you define them.
• Header provides you with stylesheet.
• User can add custom styles while defining <Header> within their app.
• Replacing Component: React Native <View>

iOS	Android

Syntax {% codetabs name="Basic", type="js" -%} import React, { Component } from 'react'; import { Container, Icon } from 'native-base/ui'; import { Header } from 'native-base'; ​ export default class HeaderExample extends Component { render() { return (

); } } {%- language name="Advanced", type="js" -%} import React, { Component } from 'react'; import { Container, Header, Title, Button, Icon, Left, Body, Right } from 'native-base/ui';

export default class HeaderExample extends Component { render() { return (

<Title>Header</Title> ); } } {%- endcodetabs %}

Header with Buttons

iOS	Android

*Syntax* {% codetabs name="Basic", type="js" -%} import React, { Component } from 'react'; import { Container, Icon } from 'native-base/ui'; import { Header } from 'native-base'; ​ export default class HeaderExample extends Component { render() { return ( } title="Header" /> ); } } {%- language name="Advanced", type="js" -%} import React, { Component } from 'react'; import { Container, Header, Title, Button, Icon, Left, Body, Right } from 'native-base/ui';

export default class HeaderExample extends Component { render() { return (

<Title>Header</Title> ); } } {%- endcodetabs %}

Only Title

iOS	Android

*Syntax* {% codetabs name="Basic", type="js" -%} import React, { Component } from 'react'; import { Container, Icon } from 'native-base/ui'; import { Header } from 'native-base'; ​ export default class HeaderExample extends Component { render() { return ( ); } } {%- language name="Advanced", type="js" -%} import React, { Component } from 'react'; import { Container, Header, Title, Button, Icon, Left, Body, Right } from 'native-base/ui';

export default class HeaderExample extends Component { render() { return (

<Title>Header</Title> ); } } {%- endcodetabs %}

With Icon Button and Text

iOS	Android

*Syntax* {% codetabs name="Basic", type="js" -%} import React, { Component } from 'react'; import { Container, Icon, Text, Button } from 'native-base/ui'; import { Header } from 'native-base'; ​ export default class HeaderExample extends Component { render() { return ( } title="Header" right={Cancel} /> ); } } {%- language name="Advanced", type="js" -%} import React, { Component } from 'react'; import { Container, Header, Title, Button, Icon, Left, Body, Right } from 'native-base/ui';

export default class HeaderExample extends Component { render() { return (

<Title>Header</Title> Cancel ); } } {%- endcodetabs %}

Custom Background

iOS	Android

*Syntax* {% codetabs name="Basic", type="js" -%} {% raw %} import React, { Component } from 'react'; import { Container, Icon } from 'native-base/ui'; import { Header } from 'native-base'; ​ export default class HeaderExample extends Component { render() { return ( ); } } {% endraw %} {%- language name="Advanced", type="js" -%} {% raw %} import React, { Component } from 'react'; import { Container, Header, Title, Button, Icon, Left, Body, Right } from 'native-base/ui';

export default class HeaderExample extends Component { render() { return ( <Header style={{backgroundColor:'red'}}> <Title style={{color:'#FFF'}}>Header</Title>

); } } {% endraw %} {%- endcodetabs %}

Configuration

	Property	Default	Option	Description
Basic	leftButton	-	user-defined	Can take Text or Icon or any custom View which aligns to the left of Header
	title	-	user-defined	Title Text of the Header aligned at the center
	rightButton	-	user-defined	Can take Text or Icon or any custom View which aligns to the right of Header
	leftButtonPress rightButtonPress	-	user-defined	functions on onPress of respective Button
	leftButtonStyle titleStyle rightButtonStyle	-	user-defined	Styles for respective components
Advanced	backgroundColor	iOS: #F8F8F8 Android: #039BE5	user-defined	Background color for header
	height	-	user-defined	Height for header