Snackbar is under Modal

[wwwenjie]

When I tried to call snackbar when a modal is open, it's under the modal layer.
I have tried to add z-index to snackbar style and wrapperStyle but not work.
Is it a bug or we have some solutions to make snackerbar show over modal?

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• react-native
• react-native-paper
• react-native-vector-icons

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[raajnadar]

Keep the snack bar after the modal in the component tree. In react native the element at the bottom will have higher zIndex.

[wwwenjie]

Thank you, problem solved by add Portal and create new Portal when call message every time (I was using a global message)

[jpcastro4]

Thank you, problem solved by add Portal and create new Portal when call message every time (I was using a global message)

As you did?

[amitsamanta996]

Thank you, problem solved by add Portal and create new Portal when call message every time (I was using a global message)

can you please show example code?

[eisodev]

An example would be great. Got an action sheet rendering on top of my Snackbar right now. And I only get around it by disabling the action sheets modal operation. But then I get a problem with safe area insets of software buttons on Android blocking the sheet instead, because it uses absolute pos, and no style to override it.

So I would like to keep my action sheet as a modal, but still render Snackbar above that "modal".

[eswarant]

I have this same problem. problem: I have snackbar in the app.tsx and showing snackbar message using redux but when I have modal, the snackbar message showing under modal. Can you please post your code to solve this issue?

[jpcastro4]

Hi guys, @eswarant and @eisodev I am solved problem using Portal in Android and FullWindowOverlay from react-native-screens in iOS. Im using react-navigation for my routes.

import { Platform } from "react-native"
import { Portal } from "react-native-paper"
import { FullWindowOverlay } from "react-native-screens"

export default ({children})=>{

    if(Platform.OS === 'ios'){
         return <FullWindowOverlay>
        {children}
    </FullWindowOverlay>
    }
   
    return <Portal>{children}</Portal>
}

[clarissacarcha]

Hi @jpcastro4 , Portal is not working in android

[eisodev]

Hi @jpcastro4 , Portal is not working in android

https://callstack.github.io/react-native-paper/4.0/portal.html

What do you mean? Not working for you?

[clarissacarcha]

Sorry, I'm looking for a solution to my problem. I created a custom snackbar, and I used react-native-actions-sheet as my modal. I used the <Portal>{children}</Portal> to wrap my snackbar, but it does not work. Still showing under the modal

[elmogallen]

@jpcastro4 I've tried your solution as well, and the Portal still doesn't work when I have a React Native Modal on Android. It shows behind it every time. The FullWindowOverlay was a great find, though.

[majugurci]

I also stumbled upon this issue.

The problem is how portals are handled by react native paper. Every new portal is added to the end of the list (https://github.com/callstack/react-native-paper/blob/main/src/components/Portal/PortalManager.tsx) and that means every newly created Portal will by default be over previously rendered portals.

This means if you have global Snackbar that is rendered only once and then let's say you use react navigation and on some screen render Modal or Dialog inside Portal that Portal will be recreated every time you enter screen and by Portal implementation will end up on top of all other Portals.

So you cannot rely only on position of Portals inside component tree but you must also take into consideration is any of Portals in app dismounted and mounted again.

The only solution I came up with is to use Snackbar like this:

	if (!visible) {
		return null;
	}
	
	return (
		<Portal>
			<Snackbar visible={true} onDismiss={closeSnackbar}>{message}</Snackbar>
		</Portal>
	)

This means Portal surrounding Snackbar will always be last in the Portal implementation list and Snackbar will always be shown. The only downside is there won't be animation on Snackbar dismiss but that's something I can live with.