React Native Snackbar Avoiding View

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

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

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

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