1.0.4 • Published 4 years ago
react-native-growl v1.0.4
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
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