/ Snackbar

A React Native library for Snackbar on Android

A React Native library for Snackbar on Android

react-native-snackbar-android

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

CSreact-native-snackbar-android

react-native-snackbar-androidZ

react-native-snackbar-android

Installation

$ npm install react-native-snackbar-android --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
  1. 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')
    
  2. Insert the following lines inside the dependencies block in android/app/build.gradle:
    compile project(':react-native-snackbar-android')
    
  3. Edit settings in android/app/build.gradle:
    compileSdkVersion 27
    buildToolsVersion "27.0.1"
    targetSdkVersion 27
    
  4. 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!') }
      }
    })

GitHub