# react-native-snackbar-avoiding-view

> AvoidingView that adjusts when a snackbar is present

Latest version **1.0.1** (published 2017-05-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-snackbar-avoiding-view
pnpm add react-native-snackbar-avoiding-view
yarn add react-native-snackbar-avoiding-view
bun add react-native-snackbar-avoiding-view
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2017-05-27 |
| First published | 2017-05-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 9 |
| Author | Kyle Roach |
| Maintainers | iroachie |
| Keywords | react-native, snackbar, view, component |

## Links

- npm: https://www.npmjs.com/package/react-native-snackbar-avoiding-view
- Repository: https://github.com/iRoachie/react-native-snackbar-avoiding-view
- Homepage: https://github.com/iRoachie/react-native-snackbar-avoiding-view#readme
- Issues: https://github.com/iRoachie/react-native-snackbar-avoiding-view/issues
- npm.io page: https://npm.io/package/react-native-snackbar-avoiding-view

## Alternatives

- [update-check](https://npm.io/package/update-check.md) — 4.0M weekly downloads
- [react-native-onesignal](https://npm.io/package/react-native-onesignal.md) — 134.5K weekly downloads
- [react-redux-toastr](https://npm.io/package/react-redux-toastr.md) — 33.7K weekly downloads
- [@nocobase/plugin-notification-manager](https://npm.io/package/@nocobase/plugin-notification-manager.md) — 2.0K weekly downloads
- [react-simple-toasts](https://npm.io/package/react-simple-toasts.md) — 1.9K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2017-05-27
- 1.0.0 — 2017-05-26
- 0.0.1 — 2017-05-26

## README

# React Native Snackbar Avoiding View
[![npm](https://img.shields.io/npm/v/react-native-snackbar-avoiding-view.svg?style=flat-square)](https://www.npmjs.com/package/react-native-snackbar-avoiding-view)
[![npm](https://img.shields.io/npm/dm/react-native-snackbar-avoiding-view.svg?style=flat-square)](https://www.npmjs.com/package/react-native-snackbar-avoiding-view)
[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)](http://commitizen.github.io/cz-cli/)

##### The Problem
Snackbar's appear at the bottom edge of the screen and overlay the content which sometimes is a Floating Action Button. However, the snackbar should not overlay the FAB according to the Material Design spec.

##### Solution
An AvoidingView that adjusts when a snackbar is present

![img](http://i.imgur.com/UvcnTLI.gif)

## Getting Started
#### Step 1

Install the component
```
npm install --save react-native-snackbar-avoiding-view
```

Or if you use yarn
```
yarn add react-native-snackbar-avoiding-view
```

##### Step 2
Use the component
```jsx
import SnackbarAvoidingView from 'react-native-snackbar-avoiding-view'

// Make a ref to the component
<SnackbarAvoidingView ref="avoidingView">
  <ActionButton />
</SnackbarAvoidingView>

// Show Snackbar and let the view avoid it
Snackbar.show({
  title: 'Heloooo',
  duration: Snackbar.LENGTH_LONG
})

this.refs.avoidingView.avoidSnackbar({
  spring: 200,
  delay: 2800,
  height: 40
})
```

## Methods
```jsx
avoidSnackbar(props)

// props is an object with 3 properties:
{ spring, delay, height }
```
| Property | Description |
| -- | -- |
| spring | Time it takes for the show/hide action |
| delay | Time to pause between the snackbar showing, then hiding |
| height | Height of the snackbar |

## Example
Clone the repo and run the Example project to see it in action

---
_Source: https://npm.io/package/react-native-snackbar-avoiding-view · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._