JSPM

  • Created
  • Published
  • Downloads 12661
  • Score
    100M100P100Q140951F
  • License MIT

Material-design "Snackbar" component for Android and iOS

Package Exports

  • react-native-snackbar

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-snackbar) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Native Snackbar

Build status npm downloads npm version Latest GitHub tag

Material-design "Snackbar" component for Android and iOS:

Snackbar screenshot

Snackbars are used for displaying a brief message to the user, along with an optional action. They animate up from the bottom of the screen and then disappear shortly afterward.

See Google's Material Design guidelines for more info on Snackbars and when to use them.

Code

Snackbar.show({
    title: 'Hello world',
    duration: Snackbar.LENGTH_SHORT,
});

Or, to include an action button:

Snackbar.show({
    title: 'Hello world',
    duration: Snackbar.LENGTH_LONG,
    action: {
        title: 'UNDO',
        color: 'green',
        onPress: () => { /* Do something. */ },
    },
});

Where duration can be one of the following:

  • Snackbar.LENGTH_SHORT (about a second)
  • Snackbar.LENGTH_LONG (about three seconds)
  • Snackbar.LENGTH_INDEFINITE (stays on screen until the button is pressed)

Installation

Here's how to use it:

  1. Install:

    • Using npm: npm install react-native-snackbar --save
    • Using Yarn: yarn add react-native-snackbar
  2. Link:

    • react-native link react-native-snackbar
  3. Import it in your JS:

    import Snackbar from 'react-native-snackbar';

Notes

A few people have suggested that the default Gradle configs created by react-native init are too outdated. If you have issues compiling for Android after linking this library, please try upgrading Gradle to the latest version! For example:

In your android/build.gradle:

  • com.android.tools.build:gradle:2.2.2

In your android/app/build.gradle:

  • compileSdkVersion 25
  • buildToolsVersion "25.0.2"