Home

Awesome

react-native-snackbar-component

A snackbar component for Android and iOS, customizable and simple.

Snackbar demo With fab

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

PropTypeEffectDefault Value
visiblebooleanShow or hide the snackbarnone
textMessagestring / functionThe main message text, can also supply a function returning JSX to render custom message UInone
actionHandlerfunctionFunction to be called when button is pressed, if absent no action button is shownnone
actionTextmessageThe text of action button, will be uppercased automaticallynone
backgroundColorcolorThe background color of snackbar#484848
accentColorcolorThe color of action button textorange
messageColorcolorThe color of main message text#FFFFFF
distanceCallbackfunctionFunction 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) => {}
positionstringThe position of the snackbar: top, bottombottom
top / bottom / left / rightnumberUse these to position the snackbar0
autoHidingTimenumberHow many milliseconds the snackbar will be hidden0 (Do not hide automatically)
containerStyleobjectOverride or add style to the root container View{}
messageStyleobjectOverride or add style to the message Text{}
actionStyleobjectOverride or add style to the action button Text{}

Note