Display React Native Paper Snackbar at the top of the screen

Question

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

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?

user_5921957 · Answer

Here's what worked for me.

Casis added to basket

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)

Display React Native Paper Snackbar at the top of the screen

1 Answers