React-Native-Growl(Snackbar)

A simple and fully customizable cross-platform React Native component that implements a growl(snackbar) UI.

Screenshots

Getting Started

Prerequisites

NodeJS >= v8.11.1 react-native-cli >= 2.0.1 react-native >= 0.57.4 npm >= 5.6.0

Table of Contents

• Install
• Example
• Options
• License

Install

npm:

npm install react-native-growl

Example

import React from "react";
import { View, Button } from "react-native";
import Snackbar from "react-native-growl";

class SnackbarComponent extends Component {
  state = {
    visible: false
  };

  showSnackbar = () => {
    this.setState({ visible: true }, () => {
      setTimeout(() => {
        this.setState({ visible: false });
      }, 3000);
    });
  };

  hideSnackbar = () => {
    this.setState({ visible: false });
  };

  render() {
    return (
      <View
        style={{
          flex: 1,
          justifyContent: "center",
          alignItems: "center",
          backgroundColor: "#FFF"
        }}
      >
        <Button title="Show snackbar" onPress={this.showSnackbar} />
        <Snackbar
          position="top"
          actionText="Close"
          message="Snackbar message"
          visible={this.state.visible}
          backgroundColor="#000000"
          messageTextColor="#FFFFFF"
          actionTextColor="#AB2611"
          handleAction={this.hideSnackbar}
        />
      </View>
    );
  }
}

Options

| Property | Type | Description | | ---------------- | ------------------------- | --------------------------------------------------------------------------- | | visible | Boolean | Boolean to show/hide the snackbar | | position | String (enum) top, bottom | Position of the snackbar | | message | String | Text message of the snackbar | | messageTextColor | String | Color of the message text | | backgroundColor | String | Backgroundcolor of the snackbar | | handleAction | Function | Callback that is called when the user taps the close button of the snackbar | | actionText | String | The text of action button | | actionTextColor | String | Color of the action text button |

License

MIT © Ajay