Bottom Navigation

Bottom navigation bars allow movement between primary destinations in an app. - Material Docs

import { BottomNavigation } from 'material-bread';

You can pass items either to the actionItem 's prop, or as children for more customization. If you pass both, the children elements will overwrite the actionItem elements. The active item is handled by passing in the index of that item to Bottom Navigation and adding a handleChange method. A simple example is shown below, more customization options can be seen in the demo's section.



Home



Favorite



Info



Settings

Live Editing

class BottomTabs extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      value: 0
    }
  }

  handleChange(value) {
      this.setState({value});
  }
 
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <BottomNavigation 
            style={{maxWidth: 672, width: '100%' }}
            backgroundColor={'white'}
            value={this.state.value}
            handleChange={(value) => this.handleChange(value)}
            actionItems={[
                {icon: 'home', label: 'Home'},
                {icon: 'favorite', label: 'Favorite'},
                {icon: 'info', label: 'Info'},
                <BottomNavigationItem icon={'settings'} label={'Settings'} />, 
            ]}
        />
      </View>
    );
  }
}

Follow the instructions on your navigation package of choice for setting up bottom tabs with a custom component. Otherwise you can add onPress props to each tab to call your navigate function.

import React, { Component } from 'react';
import { BottomNavigation, BottomNavigationItem } from 'material-bread';

class BottomTabs extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        value: 0
      }
    }
  
    handleChange(value) {
        this.setState({value});
    }
   
    render() {
      return (
        <BottomNavigation 
            style={{width: 672 }}
            backgroundColor={'white'}
            value={this.state.value}
            handleChange={(value) => this.handleChange(value)}
            actionItems={[
                {icon: 'home', label: 'Home', onPress={() => this.props.navigation.navigate('Home')}},
                {icon: 'favorite', label: 'Favorite',  onPress={() => this.props.navigation.navigate('Favorites')}},
                {icon: 'info', label: 'Info',  onPress={() => this.props.navigation.navigate('Info')}},
                <BottomNavigationItem icon={'settings'} label={'Settings'}  onPress={() => this.props.navigation.navigate('Settings')}/>, 
            ]}
        />
      );
    }
  }

Name

Description

Type

Default

actionItems

Array of objects displaying tab items

array

backgroundColor

Background Color for root component

string

white

handleChange

fires when a BottomNavigationItem is clicked

func

horizontalWhenLandscape

When in landscape mode, layout items horizontally

bool

false

showOneItem

Display one icon + label at a time, sets showOneItem to each BottomNavigationItem

bool

false

showLabels

Sets showLabel true for each BottomNavigationItem

bool

true

style

Styles root element

object

value

Index of currently active Item

number

You can see even more examples in the Storybook environment.

By default items should keep their width and have the same widths on larger width screens. If the horizontalWhenLandscape prop is added, the labels and icons will be laid out horizontally and take up the full width of the bar both per Material Design. Check the Storybook demos for examples of both.



Home



Favorite



Info



Settings

Live Editing

class BottomTabs extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        value: 0
      }
    }
  
    handleChange(value) {
        this.setState({value});
    }
   
    render() {
      return (
        <View style={{alignItems: 'center'}}>
          <BottomNavigation 
              style={{maxWidth: 672, width: '100%' }}
              value={this.state.value}
              horizontalWhenLandscape
              handleChange={(value) => this.handleChange(value)}
              actionItems={[
                  {icon: 'home', label: 'Home'},
                  {icon: 'favorite', label: 'Favorite'},
                  {icon: 'info', label: 'Info'},
                  <BottomNavigationItem icon={'settings'} label={'Settings'} />, 
              ]}
          />
        </View>
      );
    }
  }



Home



Favorite



Info



Settings

Live Editing

class BottomTabs extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      value: 0
    }
  }

  handleChange(value) {
      this.setState({value});
  }
 
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <BottomNavigation 
            style={{ maxWidth: 672, width: '100%' }}
            showLabels
            backgroundColor={'white'}
            value={this.state.value}
            handleChange={(value) => this.handleChange(value)}
            actionItems={[
                {icon: 'home', label: 'Home'},
                {icon: 'favorite', label: 'Favorite'},
                {icon: 'info', label: 'Info'},
                <BottomNavigationItem icon={'settings'} label={'Settings'} />, 
            ]}
        />
      </View>
    );
  }
}

Changing the backgroundColor will change the icons to display as white .



Home



Favorite



Settings

Live Editing

class BottomTabs extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      value: 0
    }
  }

  handleChange(value) {
      this.setState({value});
  }
 
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <BottomNavigation 
            style={{ maxWidth: 672, width: '100%' }}
            value={this.state.value}
            backgroundColor={'#673AB7'}
            handleChange={(value) => this.handleChange(value)}
            actionItems={[
                {icon: 'home', label: 'Home'},
                {icon: 'favorite', label: 'Favorite'},
                <BottomNavigationItem icon={'settings'} label={'Settings'} />, 
            ]}
        />
      </View>
    );
  }
}











Live Editing

class BottomTabs extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      value: 0
    }
  }

  handleChange(value) {
      this.setState({value});
  }
 
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <BottomNavigation 
            style={{ maxWidth: 672, width: '100%' }}
            showLabels
            backgroundColor={'white'}
            value={this.state.value}
            handleChange={(value) => this.handleChange(value)}
            actionItems={[
                {icon: 'home' },
                {icon: 'attach-money'},
                {icon: 'favorite'},
                {icon: 'info'},
                <BottomNavigationItem icon={'settings'} />, 
            ]}
        />
      </View>
    );
  }
}

Bottom Navigation

Component #

Usage #

Props #

Demos #

Landscape #

Labels #

Colored Background #

Icons #