react-native-simple-snackbar

A simple and full costumizable solution for a timed SnackBar.

Installation

npm install react-native-simple-snackbar

or

yarn add react-native-simple-snackbar

Usage

Just import the SnackBar Component and, if you want, the type of the object that controls it's status, setSnackBarType. To display the snackbar, update the value of the state controller.

You can also have multiple instances of SnackBar inside different containers, as long as you have a different instance of controller for each one.

Below are the keys you can pass to the controller:

Key	Data type	Default value?	Description
content	string	Required.	The message to show
duration	number	3000	How long to display the Snackbar in milliseconds
animation	'slide' | 'fade'	'slide'	The animation of the snackbar
position	'top' | 'bottom'	'top'	The position in container where snackbar will be displayed
backgroundColor	style	'#22943E'	The background color of the Snackbar
color	style	'#ffffff'	The color of the text
fontSize	number	18	Font size of the text
fontWeight	style	'600'	Font weight of the text
textAlign	style	'left'	Text align of the text

All you need:

//...
import { SnackBar } from 'react-native-simple-snackbar'
//...

export default function Component() {
  //...
  // start controller empty
  const [status, setStatus] = useState()
  //...

  return (
    <View style={{flex: 1}}>

      {/* When you want the SnackBar to be shown, just update the controller */}
      <TouchableOpacity onPress={() => setStatus({ content: 'My SnackBar Works!!' })}>
        <Text style={styles.text}>Touch here to activate snackbar</Text>
      </TouchableOpacity>
      
      {/* Instantiate the SnackBar inside the container you want to show it */}
      <SnackBar setSnackBar={status} />
    </View>
  )
}

Code example:

import { SnackBar, setSnackBarType } from 'react-native-simple-snackbar';
import { useState } from 'react'
import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';

export default function App() {

  // start controller empty (use the type here if you are using typescript)
  const [status, setStatus] = useState<setSnackBarType | undefined>();

  return (
    <View style={styles.container}>
      <TouchableOpacity
        style={styles.touchable}
        // When you want the SnackBar to be shown, just update the controller
        onPress={() =>
          setStatus({
            content: 'Snackbar on top!',
            backgroundColor: '#a2e5a0',
            color: '#0b0b09',
            fontSize: 30,
            fontWeight: '900',
            textAlign: 'center',
            position: 'top',
          })
        }
      >
        <Text style={styles.text}>Touch here to activate snackbar on top</Text>
      </TouchableOpacity>


      <TouchableOpacity
        style={styles.touchable}
        onPress={() =>
          setStatus({
            content: 'Snackbar on bottom!',
            backgroundColor: '#e10404',
            color: '#ffffff',
            fontSize: 20,
            fontWeight: 'bold',
            textAlign: 'justify',
            position: 'bottom',
          })
        }
      >
        <Text style={styles.text}>
          Touch here to activate snackbar on bottom
        </Text>
      </TouchableOpacity>
      {/* instantiate the SnackBar inside the container you want to show it */}
      <SnackBar setSnackBar={status} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  touchable: {
    margin: 30,
  },
  text: {
    fontSize: 18,
    textAlign: 'center',
  },
});

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library