react-native-snackbar-android
react-native-snackbar-android is a React Native library for Snackbar on Android.
Android Only
Table of Contents
Installation
react-native >= 0.60.0
$ yarn add react-native-snackbar-android
or
$ npm install react-native-snackbar-android --save
That's is all!
react-native <= 0.59.0
$ yarn add react-native-snackbar-android
or
$ npm install react-native-snackbar-android --save
Automatic Configuration
$ react-native link react-native-snackbar-android
Manual Configuration
Android
- Open up
android/app/src/main/java/[...]/MainApplication.java
- Add
import com.thebylito.reactnativesnackbar.ReactNativeSnackBarPackage;
to the imports at the top of the file - Add
new ReactNativeSnackBarPackage()
to the list returned by the getPackages()
method
- Append the following lines to
android/settings.gradle
:
include ':react-native-snackbar-android'
project(':react-native-snackbar-android').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-snackbar-android/android')
- Insert the following lines inside the dependencies block in
android/app/build.gradle
:
compile project(':react-native-snackbar-android')
- Edit settings in
android/app/build.gradle
:
compileSdkVersion 27
buildToolsVersion "27.0.1"
targetSdkVersion 27
- Add Maven to
android/build.gradle
:
buildscript {
repositories {
...
maven {
url 'https://maven.google.com/'
name 'Google'
}
...
}
AND
allprojects {
repositories {
...
maven {
url 'https://maven.google.com/'
name 'Google'
}
...
}
}
Example
Android Implementation
import React, { Component } from "react";
import SnackBar, { duration } from "react-native-snackbar-android";
import { Text, View } from "react-native";
export default class App extends Component {
componentDidMount() {
SnackBar.show({
message: "Hello Word",
backgroundColor: "red",
duration: duration.LENGTH_LONG,
onShow: () => {
console.log("SHOW");
},
onHide: () => {
console.log("HIDE");
},
action: {
title: "My Button",
txtColor: "white",
onPress: () => {
alert("You Press ME!");
}
}
});
}
render() {
return (
<View style={styles.container}>
<Text>Hello Word</Text>
</View>
);
}
}
API
PS.: Supported colors formats are: #RRGGBB #AARRGGBB
The following names are also accepted: red, blue, green, black, white, gray, cyan, magenta, yellow, lightgray, darkgray, grey, lightgrey, darkgrey, aqua, fuchsia, lime, maroon, navy, olive, purple, silver, and teal.
show(options) :(Android)
Show SnackBar
{
message: String with text to show,
duration: can be int number in miliseconds or import {duration}, // Required
backgroundColor: color of background color of SnackBar, // No required
onShow: Function on Show Snackbar, // No required
onHide: Function on Hide Snackbar, // No required
action: { // No required
title: String with text to button, // Required
onPress: Function on click button, // No required
txtColor: The color of button text, // No required
},
};
SnackBar.show({
message: "Hello Word"
});
OR
SnackBar.show({
message: "Hello Word",
backgroundColor: "red",
action: {
title: "My Button",
onPress: () => {
alert("You Press ME!");
}
}
});
License
MIT