React Native Snackbar Example

React Native

Nicesnippets

62

31-07-2020


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...