React-native-paper: [V2] SnackBar always rendered and blocking touch events

[KevinGulj]

Hello!

Current behaviour

I am trying to add buttons to the bottom of the view, but the clicks are blocked by snackbar.
Only the light blue portion of the snackbar blocks clicks.

SnackBar has no extra styles to it.
<Snackbar duration={3000} visible={this.state.open} onDismiss={() => this.handleClose()}> {this.state.disableTranslation ? this.state.message : I18n.t(this.state.message)} </Snackbar>

Expected behaviour

SnackBar should render only when visible prop is true ?

Screenshots (if applicable)

What have you tried

I have tried lowering the zIndex of the snackbar but it doesn't change anything.

Your Environment

| software | version
| --------------------- | -------
| ios or android | on both
| react-native | 0.55.4
| react-native-paper | 2.0.0-alpha.7
| node | 10.9.0
| npm or yarn | 6.2.0

Thanks!

[satya164]

Thanks for the bug report. If you want to send a PR to fix it, it's more than welcome :)

[luissmg]

@satya164 can I give it a try since the OP didn't respond?

[satya164]

@luissmg feel free! thank you :)

[KevinGulj]

Sorry, had a lot of work. Thanks if you can get it resolved.

[luissmg]

@KevinGulj Do you want to give it a try then? Or should I?

[KevinGulj]

@luissmg Go ahead. I did try a fix for it and it works for me, but I am sure it could be done better.
If you care to see how I did it: https://paste.ofcode.org/bLgKuA463F9xg5CAgZgZZE
( check the state.hidden usage)

[luissmg]

@KevinGulj That is pretty much what I was thinking to do. Since you already done it just do a PR :) Just make sure to add the type of hidden in line 45!

[KevinGulj]

502

@satya164 @luissmg
Its my first PR to open source, so please tell me if anything is wrong :)

[Trancever]

Fixed in https://github.com/callstack/react-native-paper/pull/502