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-