rn-animated-snackbar

A snackbar component for Android and iOS

Android	IOS

Installation

1. Install:

• Using npm: npm install rn-animated-snackbar --save
• Using Yarn: yarn add rn-animated-snackbar

2. Import it in your JS:

   import Snackbar from 'react-native-snackbar';

Usage

import React from 'react';
import {Button, View, StyleSheet, SafeAreaView} from 'react-native';
import Snackbar from 'rn-animated-snackbar';

const App = () => {
  const [visible, setVisible] = React.useState(false);
  const onToggleSnackBar = () => setVisible(!visible);
  const onDismissSnackBar = () => setVisible(false);
  return (
    <SafeAreaView style={styles.safeAreaContainer}>
      <View style={styles.container}>
        <Button
          title={visible ? 'Hide' : 'Show'}
          onPress={onToggleSnackBar}
          style={styles.buttonStyle}
        />
        <Snackbar
          visible={visible}
          onDismiss={onDismissSnackBar}
          text={'Hello World'}
          action={{
            label: 'Hide',
            onPress: () => {
              setVisible(true);
            },
          }}
          duration={Snackbar.LENGTH_MEDIUM}
          containerStyle={styles.snackbarContainer}
        />
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  safeAreaContainer: {
    flex: 1,
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  snackbarContainer: {
    backgroundColor: '#484848',
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
  },
});

export default App;

Options

Key	Data type	Default value?	Description
visible	boolean	Required.	Show or hide snackbar
text	style	Required.	The message to show.
textStyle	style	undefined	Text message style
duration	number	Snackbar.LENGTH_SHORT	How long to display the Snackbar.
action	object (described below)	undefined (no button)	Optional config for the action button (described below).
onDismiss	function	Required	Callback called when Snackbar is dismissed. The visible prop needs to be updated when this is called.
containerStyle	style	undefined	Snackbar container style

Where duration can be one of the following (timing may vary based on device):

• Snackbar.LENGTH_SHORT (3s)
• Snackbar.LENGTH_MEDIUM (5s)
• Snackbar.LENGTH_LONG (10s)
• Snackbar.LENGTH_INFINITY (INFINITE)

The optional action object can contain the following options:

Key	Data type	Default value?	Description
label	string	Required.	Label of the action button.
accessibilityLabel	string	undefined	The color of the button text.
labelStyle	style	undefined	Label text style.
onPress	function	undefined (Snackbar is simply dismissed)	A callback for when the user taps the button.