npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-polar-snackbar

v2.4.1

Published

Material Design "Snackbar" component for Android and iOS.

Downloads

24

Readme

React Native Snackbar

Build status npm downloads npm version Latest GitHub tag

Material Design "Snackbar" component for Android and iOS. Supports custom colors, fonts, and languages.

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({
  text: 'Hello world',
  duration: Snackbar.LENGTH_SHORT,
});

Or, to include an action button:

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

Installation

  1. Install:

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

    • RN >= 0.60 supports autolinking: first cd ios && pod install && cd ..
    • RN < 0.60: react-native link react-native-snackbar
    • Or if that fails, link manually using these steps
    • Note that because this is a native module, Expo does not support it -- to use with Expo you need to eject to ExpoKit
  3. Import it in your JS:

    import Snackbar from 'react-native-snackbar';

Usage

Snackbar.show(options)

Shows a Snackbar, dismissing any existing Snackbar first. Accepts an object with the following options:

| Key | Data type | Default value? | Description | |-----|-----------|----------------|-------------| | text | string | Required. | The message to show. | | duration | See below | Snackbar.LENGTH_SHORT | How long to display the Snackbar. | | numberOfLines | number | 2 | The max number of text lines to allow before ellipsizing. | | textColor | string or style | 'white' | The color of the message text. | | backgroundColor | string or style | undefined (dark gray) | The background color for the whole Snackbar. | | fontFamily | string | undefined | [Android only] The basename of a .ttf font from assets/fonts/ (see setup guide and example app, remember to react-native link after). | | rtl | boolean | false | [Android only, API 17+] Whether the Snackbar should render right-to-left (requires android:supportsRtl="true", see setup guide and example app). | | action | object (described below) | undefined (no button) | Optional config for the action button (described below). |

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 dismissed, replaced, or action button is tapped)

The optional action object can contain the following options:

| Key | Data type | Default value? | Description | |-----|-----------|----------------|-------------| | text | string | Required. | The button text. | | textColor | string or style | 'white' | The color of the button text. | | onPress | function | undefined (Snackbar is simply dismissed) | A callback for when the user taps the button. |

Deprecation note: The old keys title and color have been replaced by text and textColor for consistency. The old keys will continue to work for now but are deprecated and may be removed at any time.

Snackbar.dismiss()

Dismisses any existing Snackbars.

Troubleshooting

Snackbar not appearing [Android]

The Snackbar is designed to attach to whatever view is on top of your screen when show is called. If that view happens to be a temporary alert modal or some other view that goes away, you'll never see the Snackbar.

A workaround in some cases is to use setTimeout to show the Snackbar a few seconds later after the modal is gone. See issue #28 for further discussion. If you want to submit a PR to improve the view-finding logic, feel free.

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 [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 [iOS]

Make sure your Deployment Target is iOS 9.0 or above.

Software development

If you want to help contribute to this library, here are local setup steps:

  1. Clone this git repo
  2. Install main dependencies: yarn install
  3. Set up the example app too: cd example && yarn install
  4. Within the example directory, react-native run-android to run it

The example app will update automatically when changing JS code. To see your changes in the example app after updating native library code:

  1. yarn install && react-native run-android in the example directory
  2. Type "rr" in the app to trigger a reload