SheetBottom

Bottom sheets are surfaces containing supplementary content that are anchored to the bottom of the screen. - Material Docs

import { SheetBottom } from 'material-bread';

SheetBottom animates from the bottom of the screen to show more items. You can manually control swipe up and down by using onSwipeUp and onSwipeDown .

OPEN SHEET

Live Editing

class MainDemo 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 });
          }}
        />
        <SheetBottom
          visible={this.state.visible}
          onBackdropPress={() => this.setState({ visible: false })}
          onSwipeDown={() => this.setState({ visible: false })}>
          <List>
            <ListItem
              text={'Attractions'}
              icon={<Icon name={'local-movies'} size={24} />}
            />
            <ListItem
              text={'Dining'}
              icon={<Icon name={'local-dining'} size={24} />}
            />
            <ListItem
              text={'Education'}
              icon={<Icon name={'edit'} size={24} />}
            />
            <ListItem
              text={'Health'}
              icon={<Icon name={'favorite'} size={24} />}
            />
            <ListItem
              text={'Family'}
              icon={<Icon name={'group'} size={24} />}
            />
          
          </List>
        </SheetBottom>
      </View>
    );
  }
}

import React, { Component } from 'react';
import { SheetBottom, Button, List, ListItem, Icon  } 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 });
          }}
        />
        <SheetBottom
          visible={this.state.visible}
          onBackdropPress={() => this.setState({ visible: false })}
          onSwipeDown={() => this.setState({ visible: false })}>
          <List>
            <ListItem
              text={'Attractions'}
              icon={<Icon name={'local-movies'} size={24} />}
            />
            <ListItem
              text={'Dining'}
              icon={<Icon name={'local-dining'} size={24} />}
            />
            <ListItem
              text={'Education'}
              icon={<Icon name={'edit'} size={24} />}
            />
            <ListItem
              text={'Health'}
              icon={<Icon name={'favorite'} size={24} />}
            />
            <ListItem
              text={'Family'}
              icon={<Icon name={'group'} size={24} />}
            />
          
          </List>
        </SheetBottom>
      </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

SheetBottom

Component #

Usage #

Props #