This post is focused on react native snackbar example. it's simple example of how to use snackbar in react native. Here you will learn how to add snackbar in react native app. if you have question about how to add snackbar messages in react native then I will give simple example with solution.

In this example, when user clicks on “Show Snackbar” Button component, then it will display Snackbar and show messages in the bottom of the application with swiping enabled.

In the first step run the following command to create a project.

expo init ExampleApp

In this step, You will open the App.js file and put the code.

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

const Home = () => {
  const showSnackbar = () => {
    Snackbar.show({
      text: 'WelCome Mywebtuts',
      duration: Snackbar.LENGTH_INDEFINITE,
      backgroundColor: 'black',
      textColor: 'white',
      
      action: {
        text: 'UNDO',
        textColor: 'green',
        onPress: () => {
          console.log('clicked');
        },
      },
    });
  };

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

export default Home;

In the last step run your project using the below command.

expo start

You can QR code scan in Expo Go Application on mobile.

It will help you...