Snackbar

Snackbars provide brief messages about app processes at the bottom of the screen. - Material Docs

import { Snackbar } from 'material-bread';

Snackbars will show at the bottom of the containing component.

OPEN SNACKBAR

This is a snackbar component

Live Editing

class Demo extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      show: false
    }
  }
  render() {
    return (
      <View >
        <Button
          type="outlined"
          onPress={() => this.setState({ show: true })}
          textColor={'#6E2CFA'}
          text={'Open Snackbar'}
        />
        <Snackbar
          visible={this.state.show}
          action={
            <Button
              type="text"
              onPress={() => this.setState({ show: false })}
              text={'ok'}
              textColor={'#6E2CFA'}
            />
          }>
          {'This is a snackbar component'}
        </Snackbar>
      </View>
    );
  }
}

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

class Demo extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      show: false
    }
  }
  render() {
    return (
      <View >
        <Button
          type="outlined"
          onPress={() => this.setState({ show: true })}
          textColor={'#6E2CFA'}
          text={'Open Snackbar'}
        />
        <Snackbar
          visible={this.state.show}
          action={
            <Button
              type="text"
              onPress={() => this.setState({ show: false })}
              text={'ok'}
              textColor={'#6E2CFA'}
            />
          }>
          {'This is a snackbar component'}
        </Snackbar>
      </View>
    );
  }
}

Name

Description

Type

Default

animationDuration

Duration of entering and leaving animation

number

action

The action after the message, at the end of the snackbar

node

style

Styles root element

object

visible

Whether snackbar is visible

bool

false

Snackbar

Component #

Usage #

Props #