CODEWITHSUNDEEP
react-nativereact-native-paper
Ronny Giezen
Ronny Giezen

Reputation: 645

Display React Native Paper Snackbar at the top of the screen

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?

Upvotes: 5

Views: 7480

Answers (1)

Shrinivas Ambat
Shrinivas Ambat

Reputation: 151

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)

Upvotes: 15

Related Questions