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) {
    super(props);
    this.state = {
      snackIsVisible: false,
      distance: 0,
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <Button
          onPress={() => {
            this.setState({ 
              snackIsVisible: !this.state.snackIsVisible
            });
          }}
          title="show snackbar"
          color="#114455"
          accessibilityLabel="toggle"
        />

        <Snackbar
          visible={this.state.snackIsVisible}
          textMessage="This is snackbar"
          actionHandler={() => {
            alert("let's go");
            this.setState({ 
              snackIsVisible: !this.state.snackIsVisible 
            });
          }}
          actionText="let's go"
          distanceCallback={distance => {
            this.setState({ distance: distance });
          }}
        />
      </View>
    );
  }
}

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

Output

It will help you...