How to dismiss Snackbar when user click screen in react-native-paper

Question

I'm developing mobile app with react-native and react-native-paper. And I have a problem with Snackbar component provided react-native-paper. How can I make snackbar hidden when user touch anywhere?

This is the GIF, I tried to tap many when snackbar is on the bottom of the screen. I would like to it hidden when I tap the screen.

https://gyazo.com/a279a5e9a1b8270e7303446d20c238dc

This is my code.

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Provider, Snackbar } from 'react-native-paper';

export default class MainScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: true,
    };
    this.onDismissSnack = this.onDismissSnack.bind(this);
  }

  onDismissSnack() {
    this.setState({
      visible: false
    })
  }

  render() {
    return (
      <Provider>
        <Snackbar
          visible={this.state.visible}
          onDismiss={() => this.onDismissSnack()}>
          <Text>Hello Snackbar</Text>
        </Snackbar>
      </Provider>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  }
});

Abraham · Answer 1 · 2019-07-19T07:13:56.797

According to the <SnackBar/> docs you have a prop called action with let you add a label that you want, in this case, Dismiss.

Check the snack that I have created: https://snack.expo.io/@abranhe/snackbar-rn-paper

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
import { Snackbar } from 'react-native-paper';

export default () => {
  const [visible, setVisible] = useState(false);

  return (
    <View style={{ flex: 1, justifyContent: 'center' }}>
      <Button title="Show SnackBar" onPress={() => setVisible(true)} />
      <Snackbar
        visible={visible}
        onDismiss={() => setVisible(false)}
        action={{
          label: 'Dismiss',
          onPress: () => setVisible(false),
        }}>
        <Text>Hello Snackbar</Text>
      </Snackbar>
    </View>
  );
};

UPDATE after question's author request

To be able to dismiss the you can put the component inside the modal, like this:

import React, { useState } from 'react';
import {
  View,
  Text,
  Button,
  Modal,
  StyleSheet,
  TouchableWithoutFeedback,
} from 'react-native';
import { Snackbar } from 'react-native-paper';

export default () => {
  const [visible, setVisible] = useState(true);

  return (
    <View style={styles.container}>
      <Button title="Show SnackBar" onPress={() => setVisible(true)} />
      <Modal
        transparent={!visible}
        visible={visible}
        onRequestClose={() => setVisible(false)}>
        <TouchableWithoutFeedback onPress={() => setVisible(false)}>
          <View style={styles.modal}>
            <Snackbar visible={visible}>
              <Text>Hello Snackbar</Text>
            </Snackbar>
          </View>
        </TouchableWithoutFeedback>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  modal: {
    width: '100%',
    height: '100%',
    position: 'relative',
  },
});

The workaround snack https://snack.expo.io/@abranhe/workaround-snackbar, in my opinion, you should use the dismiss button, a lot easier.

Thank your comment, but in your code, you need to Press 'Dismiss' label on snackbar to hide it, right? I would like to hide it when users tap everywhere on the screen. — Satoru Kikuchi, Jul 19 '19 at 06:25
@SatoruKikuchi you can put the inside a modal and then dismiss the modal — Abraham, Jul 19 '19 at 06:29
Thank you, what the modal did you mention earlier? What kind of modal should I put into? — Satoru Kikuchi, Jul 19 '19 at 06:40

How to dismiss Snackbar when user click screen in react-native-paper

1 Answers1