A customizable and simple snackbar component for react native

by React Native Example

React Native SnackBar (rn-snackbar-component)

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

See Google Material Design for more info on Snackbars.

Installation

npm install --save rn-snackbar-component

Basic Usage

import SnackBar from 'rn-snackbar-component'

Code

Simple

    <SnackBar
      visible={true}
      message="Hello There!"
      actionHandler={() => {
        console.log("snackbar button clicked!")
      }}
      action="let's go"
    />

Advanced

    <SnackBar
      visible={true}
      message={(
         <View style={{ flex: 1, flexDirection: 'column'}}>
           <Text>{title}</Text>
           <TouchableOpacity activeOpacity={0.5} onPress={doSomething}>
             <Text>{subtitle}</Text>
           </TouchableOpacity>
         </View>
      )}
      actionHandler={() => {
        console.log("snackbar button clicked!")
      }}
      action={(
        <Icon name="close" size={20} />
      )}
      autoHidingTime={0}
    />

Options

Prop Type Effect Default Value
visible boolean Show or hide the snackbar none
message string / element The main message text / your custom component none
actionHandler function Function to be called when button is pressed, if absent no action button is shown none
action string / element The text of action button, will be uppercased automatically / your custom component none
containerStyle object The styling of snackbar container none
actionTextStyle object action button text style { color: 'orange'}
actionContainerStyle object your custom component for action's style none
messageStyle object The style of message text { color: '#ffffff'}
distanceCallback function Function 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. (distance) => {}
bottom number The starting bottom position of snackbar 0
top number The starting top position of snackbar 0
position string The position of the snackbar: top, bottom bottom
autoHidingTime number How many milliseconds the snackbar will be hidden 0 (Do not hide automatically)

Note

  • When visible prop is changed, the snackbar will be animated in/out of screen
  • When position is top/bottom, you can specify those properties, e.g.
    position="top" top={10} (or) position="bottom" bottom={10}

GitHub