React Native Snackbar: A Comprehensive Guide

Snackbar UI components are a popular feedback tool which helps to enhance the user experience. The snackbar component in React Native can be easily implemented using the react-native-snack bar library. This article aims to provide detailed Snackbars use cases and explore their various practical examples.

What is React Native Snackbar?

The Snackbar is a brief message that appears at the bottom of the screen, providing feedback to the user. It’s a non-intrusive way to inform the user about an app process or to prompt them for action. The Snackbar is of much importance in mobile applications as it helps to communicate important messages and notify users in the application. It enhances the user experience by providing immediate feedback.

Step 1: Setting up the React Native project

Before diving into the world of Snackbar, it’s essential to set up a new React Native app and install the necessary libraries. Here’s how you can do it:

Creating a New React Native App

To create a new React Native app, you need to have Node.js, npm, and the React Native command-line interface installed on your computer. If you have these, you can create a new app by running the following command in your terminal:

It will ask you to choose a template for your project, you can just select the blank template for this tutorial, and then navigate into your new project’s directory:

npx react-native init SnackbarApp

This command creates a new React Native app named “SnackbarApp”. You can replace “SnackbarApp” with any name you prefer for your app.

After creating your app, navigate into your project directory using the command:

cd SnackbarApp

Step 2: Installing the Packages

Now, you need to install the react-native-snackbar library, which provides the Snackbar component. Install it by running the following command in your project directory:

npm install react-native-snackbar

Step 3: Various Use Cases of React Native Snackbar

Now we will have a look at various examples to use and configure Snackbar UI components in React Native application. Our React native snack bar examples will include the following use cases:

• Positioning the Snackbar
• Custom Actions with Snackbar
• Text Customization in Snackbar
• Callbacks in Snackbar
• Show and Hide Features of Snackbar
• Custom Styling in Snackbar

Positioning the Snackbar

The Snackbar’s position can be adjusted according to the app’s design and user experience requirements. It’s typically displayed at the bottom of the screen, but it can also be positioned at the top for certain use cases.

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

class PositionSnackbar extends React.Component {
  displaySnackbar = () => {
    Snackbar.show({
      text: 'Greetings, this is a Snackbar notification!',
      duration: Snackbar.LENGTH_SHORT,
      position: 'top',
    });
  };

  render() {
    return (
      <View>
        <Button title="Display Snackbar" onPress={this.displaySnackbar} />
      </View>
    );
  }
}

export default PositionSnackbar;

Custom Actions with Snackbar

The Snackbar isn’t just for displaying messages. It can also include a custom action, such as an ‘Undo’ button or a ‘Retry’ option. This allows users to interact directly with the Snackbar, making it a versatile tool for user engagement.

Example 2: Custom Actions with Snackbar

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

class SnackbarAction extends React.Component {
  showSnackbar = () => {
    Snackbar.show({
      text: 'No internet connection',
      duration: Snackbar.LENGTH_INDEFINITE,
      action: {
        text: 'RETRY',
        textColor: 'green',
        onPress: () => { /* Do something */ },
      },
    });
  };

  render() {
    return (
      <View>
        <Button title="Show Snackbar" onPress={this.showSnackbar} />
      </View>
    );
  }
}

export default SnackbarAction;

Text Customization in Snackbar

The text displayed in the Snackbar can be customized to suit the app’s theme and language preferences. This includes changing the font, size, color, and even the message itself.

Example

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

class SnackbarText extends React.Component {
  showSnackbar = () => {
    Snackbar.show({
      text: 'Welcome to our app!',
      textColor: 'blue',
      backgroundColor: 'white',
      duration: Snackbar.LENGTH_SHORT,
    });
  };

  render() {
    return (
      <View>
        <Button title="Show Snackbar" onPress={this.showSnackbar} />
      </View>
    );
  }
}

export default SnackbarText;

Callbacks in Snackbar

The Snackbar can also handle callbacks. This means that when a user interacts with the Snackbar, a function can be triggered to perform a specific action. This is particularly useful for handling user responses.

Example

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

class SnackbarCallback extends React.Component {
  showSnackbar = () => {
    Snackbar.show({
      text: 'Do you want to retry?',
      duration: Snackbar.LENGTH_INDEFINITE,
      action: {
        text: 'RETRY',
        onPress: () => { /* Callback function goes here */ },
      },
    });
  };

  render() {
    return (
      <View>
        <Button title="Show Snackbar" onPress={this.showSnackbar} />
      </View>
    );
  }
}

export default SnackbarCallback;

Show and Hide Features of Snackbar

The Snackbar can be programmed to show or hide based on certain conditions. For example, it can be set to disappear after a few seconds or to stay on the screen until the user interacts with it.

Example

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

class SnackbarShowHide extends React.Component {
  showSnackbar = () => {
    Snackbar.show({
      text: 'This is a Snackbar message',
      duration: Snackbar.LENGTH_LONG,
    });

    setTimeout(() => {
      Snackbar.dismiss();
    }, 3000);
  };

  render() {
    return (
      <View>
        <Button title="Show Snackbar" onPress={this.showSnackbar} />
      </View>
    );
  }
}

export default SnackbarShowHide;

Custom Styling in Snackbar

The Snackbar’s style can be customized to match the app’s overall theme. This includes changing the background color, text color, and even the shape of the Snackbar.

Example

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

class SnackbarStyle extends React.Component {
  showSnackbar = () => {
    Snackbar.show({
      text: 'Custom style Snackbar',
      backgroundColor: 'purple',
      textColor: 'white',
      duration: Snackbar.LENGTH_SHORT,
    });
  };

  render() {
    return (
      <View>
        <Button title="Show Snackbar" onPress={this.showSnackbar} />
      </View>
    );
  }
}

export default SnackbarStyle;

Complete App Component:

Here is the complete App component with all the functionalities including what we discussed in the previous example for react-native-snackbar.

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

class App extends React.Component {
  showPositionSnackbar = () => {
    Snackbar.show({
      text: 'Snackbar at the top',
      duration: Snackbar.LENGTH_SHORT,
      position: 'top',
    });
  };

  showActionSnackbar = () => {
    Snackbar.show({
      text: 'No internet connection',
      duration: Snackbar.LENGTH_INDEFINITE,
      action: {
        text: 'RETRY',
        textColor: 'green',
        onPress: () => { /* Do something */ },
      },
    });
  };

  showTextSnackbar = () => {
    Snackbar.show({
      text: 'Welcome to our app!',
      textColor: 'blue',
      backgroundColor: 'white',
      duration: Snackbar.LENGTH_SHORT,
    });
  };

  showCallbackSnackbar = () => {
    Snackbar.show({
      text: 'Do you want to retry?',
      duration: Snackbar.LENGTH_INDEFINITE,
      action: {
        text: 'RETRY',
        onPress: () => { /* Callback function goes here */ },
      },
    });
  };

  showHideSnackbar = () => {
    Snackbar.show({
      text: 'This is a Snackbar message',
      duration: Snackbar.LENGTH_LONG,
    });

    setTimeout(() => {
      Snackbar.dismiss();
    }, 3000);
  };

  showStyleSnackbar = () => {
    Snackbar.show({
      text: 'Custom style Snackbar',
      backgroundColor: 'purple',
      textColor: 'white',
      duration: Snackbar.LENGTH_SHORT,
    });
  };

  render() {
    return (
      <View style={styles.container}>
        <Button title="Position Snackbar" onPress={this.showPositionSnackbar} />
        <Button title="Action Snackbar" onPress={this.showActionSnackbar} />
        <Button title="Text Snackbar" onPress={this.showTextSnackbar} />
        <Button title="Callback Snackbar" onPress={this.showCallbackSnackbar} />
        <Button title="Show/Hide Snackbar" onPress={this.showHideSnackbar} />
        <Button title="Style Snackbar" onPress={this.showStyleSnackbar} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16,
  },
});

export default App;

Conclusion

In this tutorial, we discussed how to implement react native snack bar in the application and also discussed various use cases. Including the position of the snackbar, callbacks, custom UI style etc. hope, this will be helpful..