Appbar Bottom

A bottom app bar displays navigation and key actions at the bottom of mobile screens. - Material Docs

import { AppbarBottom } from 'material-bread';

AppbarBottom is made up of three separate parts: navgiation , prop , and actionItems . Many combinations can be created with these props, however you can replace them with anything you want.









Live Editing

<AppbarBottom 
    fab={<Fab backgroundColor={'black'} />}
    fabPosition={'center'} 
    fabCutout
    navigation={'menu'}
    actionItems={[
        {name: 'search', onPress: () => console.log('onSearch')},
        {name: 'more-vert'},
    ]}
    style={{marginTop: 16}}
/>

Usage depends on what navigation package you're using. For react-navigation you can follow their guide on TabNavigation

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

export default class Page extends Component {
  render() {
    return (
      <View style={{position: 'relative'}}>
        <AppbarBottom 
            fab={<Fab />}
            fabPosition={'center'} 
            fabCutout
            navigation={'menu'}
            actionItems={[
                {name: 'search', onPress: () => console.log('onSearch')},
                {name: 'more-vert'},
            ]}
            style={{position: 'absolute', bottom: 0}}
        />
      <View>
    );
  }
}

Name

Description

Type

Default

actionItems

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

array

appbarStyles

Styles appbar around content

object

color

Component's background color

string

primary

fab

Renders an arbitrary Fab node where the position is indicated

node

fabCutout

Displays cutout on appbar for fab

bool

false

fabPosition

Describes position of fab

string: center, end

center

onNavigation

OnPress for navigation IconButton if provided.

func

navigation

Name of IconButton if string or node, renders on the far left before Title

node || string

style

Styles root element wrapping fab and appbar

object

You can see even more examples in the Storybook environment.

Changing fabPosition to end will move actionItems to the left after the navigation . Add the fabCutout prop to see how spacing is effected.











Live Editing

<AppbarBottom 
    fab={<Fab backgroundColor={'black'} />}
    fabPosition={'end'} 
    fabIcon={'reply'}
    actionItems={[
        {name: 'archive', onPress: () => console.log('onArchive')},
        {name: 'mail'},
        {name: 'label'},
        {name: 'delete'},
    ]}
    style={{marginTop: 16}}
/>

If you do not provide the fab prop then the component will function like a normal appbar with actionItems .











Live Editing

<AppbarBottom
    navigation={'menu'} 
    actionItems={[
        {name: 'archive', onPress: () => console.log('onArchive')},
        {name: 'mail'},
        {name: 'label'},
        {name: 'delete'},
    ]}
    style={{marginTop: 16}}
/>

















Live Editing

class Page extends React.Component {
    constructor(props) {
      super(props)
    }
    render() {
      const actions = [
        <Fab backgroundColor={'#E91E63'} icon={'archive'} />,
        <Fab backgroundColor={'#F44336'} icon={'delete'} />,
        <Fab backgroundColor={'#009688'} icon={'edit'} />,
        <Fab backgroundColor={'black'} icon={'attach-money'} />,
      ];
      return (
        <View style={{ marginTop: 300 }}>
          <AppbarBottom
              fab={
                <FabSpeedDial
                  actions={actions}
                  fab={<Fab backgroundColor={'black'} />}
                />
              }
              fabCutout
              fabPosition={'end'}
              navigation={'arrow-back'}
              actionItems={[
              { name: 'search', onPress: () => console.log('onSearch') },
              { name: 'more-vert' },
              ]}

          />
        </View>
      );
    }
  }

Adding children will replace all internal components with the provided components. This allows for full customization.

INSTALL

ABOUT



Live Editing

const styles = {
    appbar: {
      backgroundColor: '#009688',
      overflowX: 'auto',
    },
    left: {
      flexDirection: 'row', 
      alignItems: 'center', 
      justifyContent:'flex-start',
      minWidth: 'auto'
    },
    button: {
      height: 30, 
      alignSelf: 'center', 
      marginRight: 16
    },
    fabStyle: {
      backgroundColor: '#00BCD4'
    }
  }
  
  render(
  <AppbarBottom appbarStyles={styles.appbar} fab={<Fab />} fabPosition="end" fabStyles={styles.fabStyle} style={{marginTop: 16}} >
    <View style={styles.left}>
      <Button type="contained" containerStyle={[styles.button, {height: 34}]} text={'menu'}  style={{height:30}}/>
      <Button textColor="white" style={styles.button} text={'install'} />
      <Button textColor="white" style={[styles.button, {marginRight: 0}]} text="About" />
    </View>
  </AppbarBottom>
  )

Appbar Bottom

Component #

Usage #

Props #

Demos #

End Fab #

No Fab #

SpeedDial #

Custom #