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 ="avoidingView"> <ActionButton /></SnackbarAvoidingView> // Show Snackbar and let the view avoid itSnackbar thisrefsavoidingView
Methods
// 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