React Native Snackbar Example




React Native Snackbar Example

Hi Guys,

In this blog, I will explain you how to use snackbar in react native. You can easily use snackbar in react native. First i will create import namespace Snackbar from react-native-snackbar-component --save, after I will using snackbar using for Snackbar tag add in react native example.

Here, I will give you full example for simply display snackbar using react native as bellow.

Step 1 - Create project

In the first step Run the following command for create project.

expo init Snackbar

Step 2 - Installation of Dependency

In the step, Run the following command for installation of dependency.

To use Snackbar you need to install react-native-snackbar-componentr package.

To install this open the terminal and jump into your project

cd Snackbar

Run the following command

react-native-snackbar-component --save

Step 3 - App.js

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

import React, { Component } from 'react';

import { AppRegistry, StyleSheet, Text, View, Button } from 'react-native';

import Snackbar from 'react-native-snackbar-component';

export default class App extends Component {

constructor(props) {


this.state = {

snackIsVisible: false,

distance: 0,



render() {

return (

<View style={styles.container}>


onPress={() => {


snackIsVisible: !this.state.snackIsVisible



title="show snackbar"






textMessage="This is snackbar"

actionHandler={() => {

alert("let's go");


snackIsVisible: !this.state.snackIsVisible



actionText="let's go"

distanceCallback={distance => {

this.setState({ distance: distance });







const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#F5FCFF',



Step 3 - Run project

In the last step run your project using bellow command.

npm start


It will help you...

#React Native