sidevesh / React Native Snackbar Component
Licence: mit
A snackbar component for Android and iOS
Stars: ✭ 137
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Native Snackbar Component
Notistack
Highly customizable notification snackbars (toasts) that can be stacked on top of each other
Stars: ✭ 2,562 (+1770.07%)
Mutual labels: material-design, snackbar
Noty
A simple library for creating animated warnings/dialogs/alerts for Android.
Stars: ✭ 136 (-0.73%)
Mutual labels: material-design, snackbar
Cafebar
An upgraded Snackbar for Android that provides more options and easy to use
Stars: ✭ 142 (+3.65%)
Mutual labels: material-design, snackbar
Tc Material Design
Série de artigos sobre o Material Design Android
Stars: ✭ 64 (-53.28%)
Mutual labels: material-design, snackbar
React Native Snackbar
🍱 Material Design "Snackbar" component for Android and iOS.
Stars: ✭ 613 (+347.45%)
Mutual labels: material-design, snackbar
Snacky
Snacky is a small library to help you adding a Snackbar to your android project.
Stars: ✭ 482 (+251.82%)
Mutual labels: material-design, snackbar
Material
A UI/UX framework for creating beautiful applications.
Stars: ✭ 11,870 (+8564.23%)
Mutual labels: material-design, snackbar
Light
🍭 The usual Snackbar, but elegant
Stars: ✭ 542 (+295.62%)
Mutual labels: material-design, snackbar
Demo Progressive Web App
🎉 A demo for progressive web application with features like offline, push notifications, background sync etc,
Stars: ✭ 798 (+482.48%)
Mutual labels: material-design, snackbar
Snackbarbuilder
[ARCHIVED] Builder pattern for support library Snackbars, that makes them easier to customise and use
Stars: ✭ 71 (-48.18%)
Mutual labels: material-design, snackbar
Nativescript Floatingactionbutton
Material Design Floating Action Button in NativeScript apps.
Stars: ✭ 133 (-2.92%)
Mutual labels: material-design
Google Maps Autocomplete
Autocomplete input component and directive for google-maps built with angular and material design | ANGULAR V9 SUPPORTED
Stars: ✭ 134 (-2.19%)
Mutual labels: material-design
Bootstrap Table
An extended table to integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation, Vue.js)
Stars: ✭ 11,068 (+7978.83%)
Mutual labels: material-design
Angular Filemanager
JavaScript File Manager Material Design Folder Explorer Navigator Browser Manager in AngularJS with CSS3 Responsive (with FTP in PHP / Java / Node)
Stars: ✭ 1,693 (+1135.77%)
Mutual labels: material-design
Slideup Android
SlideUp is a small library that allows you to add sweet slide effect to any view.
Stars: ✭ 1,641 (+1097.81%)
Mutual labels: material-design
Animated Tab Bar
RAMAnimatedTabBarController is a Swift UI module library for adding animation to iOS tabbar items and icons. iOS library made by @Ramotion
Stars: ✭ 10,904 (+7859.12%)
Mutual labels: material-design
Dynamic Toasts
Custom toasts with color and icon for Android.
Stars: ✭ 132 (-3.65%)
Mutual labels: material-design
Motion
A library used to create beautiful animations and transitions for iOS.
Stars: ✭ 1,726 (+1159.85%)
Mutual labels: material-design
Blazormaterial
Blazor components implementing Google's Material components for web - https://material.io/components/web
Stars: ✭ 136 (-0.73%)
Mutual labels: material-design
react-native-snackbar-component
A snackbar component for Android and iOS, customizable and simple.
See Google Material Design for more info on Snackbars.
Installation
npm install --save react-native-snackbar-component
Basic Usage
import SnackBar from 'react-native-snackbar-component'
Code
<SnackBar visible={true} textMessage="Hello There!" actionHandler={()=>{console.log("snackbar button clicked!")}} actionText="let's go"/>
Options
| Prop | Type | Effect | Default Value |
|---|---|---|---|
| visible | boolean | Show or hide the snackbar | none |
| textMessage | string / function | The main message text, can also supply a function returning JSX to render custom message UI | none |
| actionHandler | function | Function to be called when button is pressed, if absent no action button is shown | none |
| actionText | message | The text of action button, will be uppercased automatically | none |
| backgroundColor | color | The background color of snackbar | #484848 |
| accentColor | color | The color of action button text | orange |
| messageColor | color | The color of main message text | #FFFFFF |
| distanceCallback | function | Function to be caled whenever snackbar moves in and out or changes layout, the function will be supplied a number indicating distance taken up by snackbar on bottom or top, based on position. | (distance) => {} |
| position | string | The position of the snackbar: top, bottom | bottom |
| top / bottom / left / right | number | Use these to position the snackbar | 0 |
| autoHidingTime | number | How many milliseconds the snackbar will be hidden | 0 (Do not hide automatically) |
| containerStyle | object | Override or add style to the root container View | {} |
| messageStyle | object | Override or add style to the message Text | {} |
| actionStyle | object | Override or add style to the action button Text | {} |
Note
- When visible prop is changed, the snackbar will be animated in/out of screen
- The snackbar will not auto-dismiss by itself, for auto-dismiss use setTimeout() and change value passed to prop to false.
- This works great together with react-native-fab. See demo for example and instructions how to.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].