onDismiss function in snackbar doesn't work in react-native-paper

Question

I'm building mobile application with react-native and react-native-paper. And I'm using SnackBar component in react-native-paper, and if I use SnackBar component directly, onDismiss function in SnackBar component works well. (It means the snackbar will disappear correctly)

But if I use my original component(like SnackBarComponent component) which uses SnackBar component provided react-native-paper, somehow, the snackbar will not disappear correctly.

This is my custom SnackBar Component and the code which calls my original SnackBar Component.

My original SnackBar Component

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

export default class SnackBarComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      snackbarVisible: false
    }
  }

  render() {
    return(
      <Provider>
        <Snackbar
          visible={this.props.snackbarVisible}
          onDismiss={() => this.setState({ snackbarVisible: false })}
        >
          <Text>{this.props.snackbarText}</Text>
        </Snackbar>
      </Provider>
    )
  }
}

The code which calls SnackBarComponent(This is not whole code)

import SnackBarComponent from './components/SnackBarComponent';

:

handleShowSnackbar() {
  this.setState({
    snackbarVisible: true,
    snackbarText: 'show snackbar'
  })
}

:

<SnackBarComponent snackbarVisible={this.state.snackbarVisible} snackbarText={this.state.snackbarText}/>

:

ShocKwav3_ · Accepted Answer · 2019-07-10T09:05:23.470

You have a state containing snackbarVisible which is local to SnackBarComponent and it is initially false.

Then you have snackbarVisible in the parent component state where it's local to the parent component. It is not the same as snackbarVisible in SnackBarComponent.

In case you did not specifically defined a state in parent component containing snackbarVisible, please note that when you run setState method it will create snackbarVisible in the state if not found one.

When you are updating snackbarVisible(dismiss in this case) you have to update the one you defined here visible={this.props.snackbarVisible} which is containing the snackbarVisible in the parent component through the props. Which means you have to update the parent component's snackbarVisible. For that you can pass a callback to the SnackBarComponent and update the right value in the parent component. Here's an example:

    //parent component
    import SnackBarComponent from './components/SnackBarComponent';

    :

    handleShowSnackbar() {
      this.setState({
        snackbarVisible: true,
        snackbarText: 'show snackbar'
      })
    }

//add a function to update the parents state
    handleDismissSnackbar = () => {
      this.setState({
        snackbarVisible: false,
      })
    }

    :

    <SnackBarComponent snackbarVisible={this.state.snackbarVisible}
                       snackbarText={this.state.snackbarText}
                       dismissSnack={this.handleDismissSnackbar}/>   //add here

Then the children component SnackBarComponent in this case as follows:

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

export default class SnackBarComponent extends Component {
//you dont need to maintain this local state anymore for this purpose  
/*constructor(props) {
    super(props);
    this.state = {
      snackbarVisible: false
    }
  }*/

  render() {
    return(
      <Provider>
        <Snackbar
          visible={this.props.snackbarVisible}
          onDismiss={() => this.props.dismissSnack()}   //use that function here
        >
          <Text>{this.props.snackbarText}</Text>
        </Snackbar>
      </Provider>
    )
  }
}

Now when you press dismiss, it will call the handleDismissSnackbar in parent component by dismissSnack passed through the props.

this is controlling from parent. Example of controlled components. You can find about it more here: https://reactjs.org/docs/forms.html#controlled-components

onDismiss function in snackbar doesn't work in react-native-paper

1 Answers1