react-native-snackbar-android

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

Android Only

Table of Contents

• Installation
• Example
• API
• License

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@0.2.1

or

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

Automatic Configuration

$ react-native link react-native-snackbar-android

Manual Configuration

Android

1. 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

2. 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')
   

3. Insert the following lines inside the dependencies block in android/app/build.gradle:

   compile project(':react-native-snackbar-android')
   

4. Edit settings in android/app/build.gradle:

   compileSdkVersion 27
   buildToolsVersion "27.0.1"
   targetSdkVersion 27
   

5. 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