Skip to content

Header.md

Latest commit

 

History

History
140 lines (134 loc) · 4.94 KB

Header.md

File metadata and controls

140 lines (134 loc) · 4.94 KB
Raw

header-def-headref

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: Left, Body and Right.
  • 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

Preview ios header-def-headref Preview android header-def-headref

Contents:

Syntax

import React, { Component } from 'react';
import { Container, Header, Left, Body, Right, Button, Icon, Title } from 'native-base';
export default class HeaderExample extends Component {
  render() {
    return (
      <Container>
        <Header>
          <Left>
            <Button transparent>
              <Icon name='arrow-back' />
            </Button>
          </Left>
          <Body>
            <Title>Header</Title>
          </Body>
          <Right>
            <Button transparent>
              <Icon name='menu' />
            </Button>
          </Right>
        </Header>
      </Container>
    );
  }
}


Configuration

Property Default Option Description
Left - - Components render to the left in Header
Body - - Components render at the center of Header
Right - - Components render to the right in Header
iosBarStyle - light-content, dark-content, default Set iOS barStyle
androidStatusBarColor - - Set background color for status bar in android
noShadow - boolean Removes elevation from android
searchBar - boolean Add searchbar to header or not
rounded - boolean Make header searchbar rounded
hasSubtitle - boolean Add subtitle to header
hasSegment - boolean Add segments to header
hasTabs - boolean Add tabs to header
span - boolean Doubles the header size