React Native Snackbar Reddit

React Native Snackbar with reddit-like style

Installation

$ npm install react-native-snackbar-reddit --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.
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 {
  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"),
      darkTheme: true,
      aboveTabBar: true
    });
  };

  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. Required | None | | duration | Delay time to cloase Snackbar in seconds | 4 | | action | Sets action for snackbar | {} | | onClose | A callback function Triggered when the Snackbar is closed | () => {} | | actionTextColor | Custom action button text color | #757575 | | contentStyle | Style object for snackbar text styling | {} | | aboveTabBar | Sets Snackbar appearance above tab bar | false | | tabBarHeight | TabBar Height in px. Works only when aboveTabBar set to true | 56 | | borderColor | Custom border color | | | position | Snackbar position. Values are "top" and "bottom" | bottom | | disableBorder | Prop for disabling border on Snackbar | false | | borderWidth | Snackbar border width | 5 |

License

MIT License. © Alexander Bogdanov 2019-