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 | ViewStyle | The styling of snackbar container | none | | actionTextStyle | TextStyle | action button text style | { color: 'orange'} | | actionContainerStyle | ViewStyle | your custom component for action's style | none | | messageStyle | TextStyle | 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) | | native | boolean | Using native driver | true |

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}