0.0.8 • Published 5 years ago
react-native-snackbar-reddit v0.0.8
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-