React-native-paper: Snackbar under Keyboard in iOS

Created on 22 Sep 2018 · 14Comments · Source: callstack/react-native-paper

Current behaviour

Thank you very much for this wonderful library! I am here to report a tiny bug :)

In iOS, if the keyboard is shown, and we trigger a snackbar, then that snackbar will be hidden under the keyboard. The only way to see it is to close the keyboard. (The version I use it material-next :) )

Expected behaviour

The snackbar is shown above the keyboard, so the user can see it when keyboard is open.

Code sample

Screenshots (if applicable)

What have you tried

Your Environment

| software | version
| --------------------- | -------
| ios or android |
| react-native |
| react-native-paper | material-next
| node |
| npm or yarn |

Source

fzyzcjy

👍2

All 14 comments

Can you provide a Snack? I think this can be fixed without changes in the library.

ferrannp on 27 Sep 2018

OK I will do that asap. Could you plz give a template of snack?

fzyzcjy on 28 Sep 2018

@fzyzcjy https://snack.expo.io/SkYXN8iFX

Trancever on 28 Sep 2018

OK I will do asap!

fzyzcjy on 28 Sep 2018

👍1

Here it is: https://snack.expo.io/@fzyzcjy/snackbar-under-keyboard
Actually, I find that it has the problem on both android and iOS.

fzyzcjy on 30 Sep 2018

@ferrannp @Trancever Hi the snack is posted above :) I am not sure whether you receive any notification from github so I manually at you again

fzyzcjy on 2 Oct 2018

@fzyzcjy Yeah, we got notification, but we don't have much time to work on issues during weekend :) I'll take a look on it today.

Trancever on 2 Oct 2018

@Trancever it does not matter :) have a good day!

fzyzcjy on 2 Oct 2018

👍1

@fzyzcjy Check this - https://snack.expo.io/r1V_79g97

Trancever on 2 Oct 2018

👍1

@Trancever Thank you! But I think it is a little bit not elegant... Could we make use of https://facebook.github.io/react-native/docs/keyboardavoidingview ? Thanks!

fzyzcjy on 2 Oct 2018

Why would you want to show a snackbar above the keyboard? There's already very little space when an input is focused.

satya164 on 2 Oct 2018

@satys164 Hmmmm... Sounds reasonable! But I want to show some errors to notify users. There errors are irrelevant to input boxes so I cannot attach it to textinput. Thank you!

fzyzcjy on 3 Oct 2018

@fzyzcjy maybe you can show a red banner at top of the screen

satya164 on 3 Oct 2018

@satya164 Good idea I will try it. Thanks!

fzyzcjy on 3 Oct 2018

Was this page helpful?

0 / 5 - 0 ratings