DrawerBottom

Bottom navigation drawers are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. - Material Docs

import { DrawerBottom } from 'material-bread';

DrawerBottom is a type of SheetBottom , specifically the modal type. All the same props and usages apply.

OPEN DRAWER

Live Editing

class MainDemo extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
        visible: false,
    }
  }
  render() {
    return (
      <View style={{ flex: 1}}>
        <Button
          text="Open Drawer"
          onPress={() => {
            this.setState({ visible: true });
          }}
        />
        <DrawerBottom
          visible={this.state.visible}
          onBackdropPress={() => this.setState({ visible: false })}
          onSwipeDown={() => this.setState({ visible: false })}>
          <View>
            <DrawerHeader title={'Jon Snow'} subtitle={'Knows nothing'} />
            <DrawerSection>
              <DrawerItem text={'Inbox'} icon={'mail'} active />
              <DrawerItem text={'Outbox'} icon={'send'} />
              <DrawerItem text={'Favorites'} icon={'favorite'} />
            </DrawerSection>
          </View>
        </DrawerBottom>
      </View>
    );
  }
}

import React, { Component } from 'react';
import { DrawerBottom, Button,  DrawerHeader, DrawerSection, DrawerItem, } from 'material-bread';

class SelectPage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
        visible: false
    }
  }
  render() {
    return (
      <View style={{ flex: 1}}>
        <Button
          text="Open Sheet"
          onPress={() => {
            this.setState({ visible: true });
          }}
        />
        <DrawerBottom
          visible={this.state.visible}
          onBackdropPress={() => this.setState({ visible: false })}
          onSwipeDown={() => this.setState({ visible: false })}>
          <View>
            <DrawerHeader title={'Jon Snow'} subtitle={'Knows nothing'} />
            <DrawerSection bottomDivider>
              <DrawerItem text={'Inbox'} icon={'mail'} active />
              <DrawerItem text={'Outbox'} icon={'send'} />
              <DrawerItem text={'Favorites'} icon={'favorite'} />
            </DrawerSection>
          </View>
        </DrawerBottom>
      </View>
    );
  }
}

Name

Description

Type

Default

cardVerticalPadding

Padding vertical on the sheet, this used in calculating the position

number

duration

How long the hide animation takes

number

200ms

onBackdropPress

Callback when mask is pressed, usually to close sheet

func

onSwipeDown

Callback on swiping down, usually to close sheet

func

onSwipeUp

Callback on swiping up

func

pageHeight

Manually control the height of the page, useful for demos or sheets that shouldn't take up the whole page

number

ScreenHeight

style

Styles sheet element

object

visible

Toggles Sheet animation

bool

wrapperStyles

Styles wrapper around the whole page

object

DrawerBottom

Component #

Usage #

Props #