React-native-snackbar-android NPM

react-native-snackbar-android

react-native-snackbar-android is a React Native library for Snackbar on Android.

Android Only

Installation

$ yarn add react-native-snackbar-android

$ npm install react-native-snackbar-android --save

That's is all!

$ yarn add react-native-snackbar-android

$ 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!");
    }
  }
});