Skip to content
This repository has been archived by the owner on Apr 29, 2020. It is now read-only.

iRoachie/react-native-snackbar-avoiding-view

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Native Snackbar Avoiding View

npm npm Commitizen friendly

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

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