Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-native-snackbar with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-native/package.json"); // react-native is a peer dependency. var reactNativeSnackbar = require("react-native-snackbar")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-native-snackbar v2.0.2

Material Design "Snackbar" component for Android and iOS.

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.

How it works

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

Or, to include an action button:

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

Installation

  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
    • Or if that fails, link manually using these steps
  3. Import it in your JS:

    import Snackbar from 'react-native-snackbar';
    

Customization

Snackbar.show() accepts the following options:

KeyData typeDefault value?Description
titlestringRequired.The message to show.
durationSee belowSnackbar.LENGTH_SHORTHow long to display the Snackbar.
actionobject (described below)undefined (no button)Optional config for the action button (described below).
backgroundColorstring or styleundefined (natively renders as black)The background color for the whole Snackbar.
colorstring or styleundefined (natively renders as white)The text color for the title.

Where duration can be one of the following (timing may vary based on device):

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

And the optional action object can contain the following options:

KeyData typeDefault value?Description
titlestringRequired.The text to show on the button.
onPressfunctionundefined (Snackbar is simply dismissed)A callback for when the user taps the button.
colorstring or styleundefined (natively renders as white)The text color for the button.

Troubleshooting

Undefined import

If you see errors similar to Cannot read property 'LENGTH_LONG' of undefined or Undefined not an object (NativeModules.RNSnackbar), please refer to issue #43 for help.

Compiling for Android

If you have issues compiling for Android after linking this library, please try updating your Gradle and Android configs to the latest versions. For example:

In your android/build.gradle:

  • com.android.tools.build:gradle:3.4.1 (or higher)

In your android/app/build.gradle:

  • compileSdkVersion 28 (or higher)
  • buildToolsVersion "28.0.3" (or higher)

Compiling for iOS

Make sure your Deployment Target is iOS 9.0 or above.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free