3

I'm using a SnackBar from React Native Paper that is displayed at the bottom of my app:

enter image description here

But I want to display this snackbar at the top of the screen. I tried to do it using styled components:

export const ConfirmSnack = styled(Snackbar)`
  top: 0;
`;

But that does not do the trick, even when adding position: absolute; I've read the docs but can't find anything on positioning the snackbar. How can I show this snackbar at the top of the screen?

Ronny Giezen
  • 557
  • 2
  • 10
  • 21

1 Answers1

7

Here's what worked for me.

<Snackbar wrapperStyle={{ top: 0 }} visible={true}>Casis added to basket</Snackbar>

wrapperStyle

Style for the wrapper of the snackbar

Here's expo link which would toggle the vertical alignment

Link to [documentation] of React Native Paper Snackbar (https://callstack.github.io/react-native-paper/snackbar.html#wrapperStyle)

Shrinivas Ambat
  • 71
  • 1
  • 4