react-native-snackbar-material v1.0.0

React Native Snackbar Material

React Native Snackbar build with Material Guidelines.

Installation

$ npm install react-native-snackbar-material --save

Usage

Inside your main app.js file define a snackbar provider

import { SnackProvider } from 'react-native-snackbar-reddit';

export default class App extends Component {
  render() {
    return (
      <SnackProvider>
        {...}
      </SnackProvider>
    );
  }
}

Now you can use Snackbar inside any component of SnackProvider. Default method is Snackbar.show() - Without any border, default material snackbar. There are 4 types of snackbar with different border colors: Snackbar.info(), Snackbar.error(), Snackbar.success(), Snackbar.warning()

import { Snackbar } from "react-native-snackbar-reddit";

export default class ExampleComponent extends Component {

 handleDefaultSnackbar = () => {
    Snackbar.show({
      content: "Info Snackbar Content"
    });
  };
  
  handleInfoSnackbar = () => {
    Snackbar.info({
      content: "Info Snackbar Content"
    });
  };

  handleErrorSnackbar = () => {
    Snackbar.error({
      content: "Error Snackbar Content",
      duration: 5,
      action: {
        onPress: () => console.warn("Action Pressed"),
        label: "Action"
      },
      onClose: () => console.warn("Snackbar close"),
      theme: 'light',
      margin: 52,
      position: 'top',
    });
  };

  handleSuccessSnackbar = () => {
    Snackbar.success({
      content: "Success Snackbar Content"
    });
  };

  handleWarningSnackbar = () => {
    Snackbar.warning({
      content: "Warning Snackbar Content"
    });
  };

  render() {
    return (
      <View>
        <TouchableOpacity onPress={this.handleInfoSnackbar}>
          <Text>Info Snack</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={this.handleErrorSnackbar}>
          <Text>Error Snack</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={this.handleSuccessSnackbar}>
          <Text>Success Snack</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={this.handleWarningSnackbar}>
          <Text>Warning snack</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

Properties for all snackbars

Content is required prop, every other prop is optional

License

MIT License. © Alexander Bogdanov 2019