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

| Prop | Description | Default | | --------------------- | ------------------------------------------------------------ | ---------- | | content | Content of Snackbar. Can be string or Component. Required | None | | duration | Delay time to cloase Snackbar in seconds | 4 | | action | Sets action for snackbar ( action: { onPress: () => {}, label: "Some button label" }) | {} | | onClose | A callback function Triggered when the Snackbar is closed | () => {} | | actionTextColor | Custom action button text color | #757575 | | contentStyle | Style object for snackbar text styling | {} | | margin | Margin from top or bottom (depends on position of snackbar) | 0 | | borderWidth | Snackbar border width | 0 | | borderColor | Custom border color | | | position | Snackbar position. Values are "top" or "bottom" | bottom | | theme | Theme of snackbar for fast customisation. Values is "default" or "light" | default |

License

MIT License. © Alexander Bogdanov 2019