Snackbar renders relatively to the parent component instead of the bottom of the page

[matewka]

Current behaviour

I'm trying to render a Snackbar component at the bottom of the screen. I'm doing everything according to the documentation but the Snackbar always renders relatively to its parent.

Expected behaviour

Snackbar should render at the bottom of the screen, as explained in the documentation: https://callstack.github.io/react-native-paper/docs/components/Snackbar

How to reproduce?

This problem became so annoying to me that I've prepared a clean example repo for anyone to be able to reproduce:
https://github.com/matewka/rnp-snackbar-test.git

1. Download the code, run npm i, npm start and run on your preferred device / simulator.
2. Click on any of the buttons (red, green or blue) to display the Snackbar.

Preview

https://github.com/matewka/rnp-snackbar-test/raw/master/snackbar-example-video.mp4

Your Environment

software	version
ios	16.2
android	x
react-native	0.71.8
react-native-paper	5.8.0
node	18.12.1
npm or yarn	7.24.2
expo sdk	48

[lukewalczak]

Hey @matewka, based on your github repo, I've created a snack with the solution which should work for you, here is the link.

Generally what I did there, is lifting and locating the Snackbar within the main App view, so it will be rendered at the bottom of that container. In the comparison to the previous code, it's rendered outside of the Snack components and it is no longer associated with any specific Snack container.

I hope it will help you!

[matewka]

Hi @lukewalczak,

I'm sorry, but your proposition is by no means a solution to me. I thought it goes without saying that the example I gave is just a very simple reproduction of the problem.

In my real application the complexity of components is much much more advanced. I'm not going to lift the Snackbar to the root of my application every time I use it and engage the React Context or some different tool to maintain its state.

Anyway, I've already figured out that the solution to my particular problem is to simply wrap the Snackbar with the Portal component.

But the bug still remains. The documentation of the Snackbar says that it should render at the bottom of the screen. Common sense also tells me that it should be rendered there regardless of the positioning of any ancestor component (that's at least how majority of other UI libraries render snackbar-kind-of components).

So it's either the RN-Paper's documentation that contains a wrong statement, or the Snackbar behaviour is incorrect. If you want to keep the current behaviour of the Snackbar (static positioning) and avoid breaking changes, maybe it's worth adding a sentence or two about positioning and providing an example with Portal? Sorry for being so insistive on this but I've wasted a few hours trying to figure out what I was doing wrong with the component usage.

[lukewalczak]

In my real application the complexity of components is much much more advanced. I'm not going to lift the Snackbar to the root of my application every time I use it and engage the React Context or some different tool to maintain its state.

The intention of my suggestion about lifting the component was more about presenting that Snackbar will be rendered at the bottom of the container in which is located and rendered.

Apart from that I agree that documentation can be improved there, since saying: "Snackbars provide brief feedback about an operation through a message at the bottom of the screen" can be misleading.

Anyway, I've already figured out that the solution to my particular problem is to simply wrap the Snackbar with the Portal component.

Would you like to share that example in the form of snack, so I can add it then in the documentation?

[matewka]

Hi @lukewalczak ,
Here's an example of the problem and how to fix it:
https://snack.expo.dev/@matewka/react-native-paper-snackbar-problem

Feel free to close this issue whenever you like.

[lukewalczak]

Thanks @matewka! I will link your example in the More Examples section (like it's done e.g. in Portal component) and adjust the Snackbar description 🙌🏽

[lukewalczak]

Closing via: 4492c0c

[salesp07]

I couldn't center my snackbar horizontally for some reason. Wrapping the snackbar with a Portal fixed it! That should prob be added to the official docs at some point. Thx @matewka!

[RiedelNicolas]

I don't think that this issue should be closed until the solution from @matewka is added to the documentation.

[lukewalczak]

@RiedelNicolas it's added to the documentation in the section More Examples