Appbar Top

The top app bar displays information and actions relating to the current screen. - Material Docs

import { Appbar } from 'material-bread';

Appbar s are essentially broken into three parts: navigation , title , and actionItems . Many combinations are possible using these sections, but if you need more customization you can replace all of them by passing children .



Page Title







Live Editing

 <Appbar
    barType={"normal"}
    title={'Page Title'} 
    navigation={'menu'}
    onNavigation={() => console.log('onNavigation!')}
    actionItems={[
    <Badge
        containerStyle={{marginRight: 16, flex: 1}}
        color={'#e10050'}
        textColor={'white'}
        size={14}
        content={77}>
        <IconButton name="favorite" size={24} color={'white'} />
    </Badge>,
    {name: 'search', onPress: () => console.log('onSearch')},
    {name: 'more-vert'},
    ]}
/>

Usage depends entirely on what kind of navigation you are using in your app. For example, in react-navigation you can replace the entire header with a custom appbar.

import React, { Component } from 'react';
import { View } from 'react-native';
import { Appbar } from 'material-bread';

export default class Header extends Component {
  render() {
    return (
      <View style={styles.header}>
        <Appbar title={'Page Title'} />
      <View>
    );
  }
}

Usage depends entirely on what kind of navigation you are using in your app. For example, in react-navigation you can replace the entire header with a custom appbar.

Name

Description

Type

Default

actionItems

Each can be an object or node, renders on the right

array

actionItemsStyle

Styles the container around the actionItems

object || array

barType

Type of appbar, other components change based on type

string: regular, prominent, dense, prominent dense

regular

backgroundImage

Renders image element as background

node

color

Component's background color

string

primary

elevation

Shadow on container appbar

number

onNavigation

OnPress for navigation IconButton if provided.

func

onTitle

OnPress for title string if provided.

func

navigation

Renders IconButton if string, or renders custom node on left of title

node || string

position

CSS position values applied to root appbar

string: fixed, relative, absolute

relative

subtitle

Only displays on barType prominent, under the Title

string

subtitleStyles

Styles Subtitle

object

title

Displays on the left after navigation. If string it follows guidelines

string || node

titleStyles

Styles title if provided as string

object

style

Styles root element

object

You can see even more examples in the Storybook environment.

You must pass in an Image component, please read the React Native docs on Images to get a better idea of how to pass in images. Generally they are only used for prominent bars, but can be used on other types.



Background image

Live Editing

<Appbar
  barType={'prominent'}
  title={'Background image'}
  color={'#9C27B0'}
  navigation={'menu'}
  backgroundImage={
    <Image
      source={{
        uri:
          "https://images.pexels.com/photos/355465/pexels-photo-355465.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
      }}/>
    }
/>

You can add a Searchfield or any other component directly in the Appbar



Page Title









Live Editing

 
class Header extends React.Component {
  constructor() {
    super();
    this.state = {
      isSearching: false,
      value: ''
    };
  }

  render() {
    return (
      <Appbar
        title={'Page Title'} 
        navigation={'menu'}
        actionItems={[
          <Searchfield 
            style={{
              marginHorizontal: 24, 
              flexGrow: this.state.isSearching ? 1 : 0,
              flexShrink: 0
            }}
            primary
            value={this.state.value}
            onChangeText={(value) => this.setState({value})}
            onFocus={() => this.setState({isSearching: true})}
            onBlur={() => this.setState({isSearching: false})}
            onCloseIcon={() => this.setState({value: ''})}
          />,

          {name: 'favorite'},
          <IconButton name="more-vert" size={24} color={'white'} />, 
        ]}
        navigation={'close'}
      />
    );
  }
}

The ability to replace components provides various ways to display contextual Appbar s. The following demonstrates how one might set up a full search bar. Click the back button to return to a regular Appbar , click the search icon to open the contextual search appbar.



Live Editing

class Header extends React.Component {
  constructor() {
    super();
    this.state = {
      value: '',
      isSearching: true
    };
  }
  
  render() {
    return (
      <Appbar
        title={'Page Title'} 
        navigation={'menu'}
        actionItems={[ 
          {name: 'search', onPress: () => this.setState({isSearching: true})},
          {name: 'favorite'},
          <IconButton name="more-vert" size={24} color={'white'} />, 
        ]}
        style={{paddingHorizontal: this.state.isSearching ? 0 : 16}}
      >
      {this.state.isSearching ?  
        <Searchbar
          style={{height: 56, width: '100%', paddingHorizontal: 16, backgroundColor: 'white'}}
          value={this.state.value}
          onChangeText={(value) => this.setState({value})}
          onNavigation={() => this.setState({isSearching: false})}
          onCloseIcon={() => this.setState({value: ''})}
        /> : null}
      </Appbar>
    );
  }
}

Subtitles can be used on normal or prominent barType s, but not dense . Try changing barType to normal to see how it will display



Page Title

Subtitle







Live Editing

<Appbar
  barType={'prominent'}
  title={'Page Title'} 
  subtitle={'Subtitle'}
  navigation={'menu'}
  actionItems={[
    {name: 'favorite'},
    {name: 'search', onPress: () => console.log('onSearch')},
    <IconButton name="more-vert" size={24} color={'white'} />, 
  ]}
/>

You can add a Menu to the Appbar as shown below.





SHOW MENU

Live Editing

 
class AppbarDemo extends React.Component {
  constructor() {
    super();
    this.state = {
      visibleOne: false
    };
  }

  render() {

    return (
      <Appbar
        barType={'normal'}
        navigation={'menu'}
        color={'#00BCD4'}
        style={{ marginBottom: 20 }}
        actionItems={[
          { name: 'search', onPress: () => console.log('onSearch') },
          <Menu
            visible={this.state.visibleOne}
            onBackdropPress={() => {
              console.log('called')
              this.setState({visibleOne: false})
            }
            }
            button={
              <Button
                textColor={'white'}
                text={'Show menu'}
                onPress={() => this.setState({ visibleOne: !this.state.visibleOne })}
                type="text"
              />
          }>
            <MenuItem text={'Menu item 1'} onPress={() => this.setState({ visible: false })} />
            <MenuItem text={'Menu item 2'} onPress={() => this.setState({ visible: false })} />
            <MenuItem text={'Menu item 3'} onPress={() => this.setState({ visible: false })} />
          </Menu>,
        ]}
      />
    );
  }
}

Adding children will replace all internal components with the provided components.

HOME

INSTALL

DOCS

ABOUT

BUY

Live Editing

const styles = {
  appbar: {
    alignItems: 'center', 
    justifyContent:'space-between', 
    height: 60, 
    paddingVertical: 0, 
    paddingHorizontal: 8,
    backgroundColor: 'black',
    overflowX: 'auto'
  },
  left: {
    flexDirection: 'row', 
    alignItems: 'center', 
    justifyContent:'flex-start',
  },
  button: {
    height: 30, 
    alignSelf: 'center', 
    marginRight: 16
  },
}
  
render(
  <Appbar style={styles.appbar}>
  <View style={styles.left}>
    <Button text={'Home'} textColor="white" style={styles.button} />
    <Button text={'Install'} textColor="white" style={styles.button} />
    <Button text={'Docs'} textColor="white" style={styles.button} />
    <Button text={'About'} textColor="white" style={[styles.button, {marginRight: 0}]} />
  </View>
  <Button text={'Buy'} type={'contained'} textColor="white" containerStyle={[styles.button, {marginRight: 0}]} />
  </Appbar>
)

Appbar Top

Component #

Usage #

Props #

Demos #

Background image #

Searchfield #

Search Bar #

Subtitle #

Menu #

Custom #