How to Add Snackbar Messages in React Native

Last Updated on December 14, 2020.

If you are a regular Android user then chances are high that you come across snackbars. Snackbars are part of material design and are used to inform users about an action performed or about to perform.

Even though snackbar has some similarity to Android toast, it has its own identity. Usually, Snackbar appears briefly at the bottom of a screen and does not interrupt user interface.

So how to add snackbar in react native which works both on android and ios platforms?

There are some third party libraries out there with snackbar component. In this react native snackbar example, I am going with react native snackbar library.

First of all, add the library using any of the following commands.

npm install react-native-snackbar --save

or

yarn add react-native-snackbar

If you have any installation problem then you can follow manual steps given here.

In the following react native example, I show snackbar when the touchableOpacity is pressed. The duration is given indefinite and the snackbar get dismissed once the undo is pressed.

Class based component


import React, {Component} from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
import Snackbar from 'react-native-snackbar';

export default class Home extends Component {
  constructor(props) {
    super(props);
  }

  showSnackbar = () => {
    Snackbar.show({
      text: 'Hello world',
      //You can also give duration- Snackbar.LENGTH_SHORT, Snackbar.LENGTH_LONG
      duration: Snackbar.LENGTH_INDEFINITE,
      //color of snakbar
      backgroundColor: 'black',
      //color of text
      textColor: 'white',
      //action
      action: {
        text: 'UNDO',
        textColor: 'green',
        onPress: () => {
          console.log('clicked');
        },
      },
    });
  };

  render() {
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <TouchableOpacity onPress={() => this.showSnackbar()}>
          <Text>Touch Here To Make Snackbar Appear</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

Function based component

import React from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
import Snackbar from 'react-native-snackbar';

const Home = () => {
  const showSnackbar = () => {
    Snackbar.show({
      text: 'Hello world',
      //You can also give duration- Snackbar.LENGTH_SHORT, Snackbar.LENGTH_LONG
      duration: Snackbar.LENGTH_INDEFINITE,
      //color of snakbar
      backgroundColor: 'black',
      //color of text
      textColor: 'white',
      //action
      action: {
        text: 'UNDO',
        textColor: 'green',
        onPress: () => {
          console.log('clicked');
        },
      },
    });
  };

  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <TouchableOpacity onPress={() => showSnackbar()}>
        <Text>Touch Here To Make Snackbar Appear</Text>
      </TouchableOpacity>
    </View>
  );
};

export default Home;

The output will be as given below:

react native snackbar example

If you are looking for alternative libraries with snackbar component then have a look at react native paper library.

Leave a Reply

%d bloggers like this: