expo-router stack with modal not showing overlay components "on top"

[johanhermansson]

Maybe I'm doing something wrong, but when I'm using for example a Menu or AlertDialog. I'm not sure how to setup expo-router in a Snack.

When opening the modal route with router.push or the dialog won't show in the view, but when close the modal by swiping there's a flick of a second where I see the AlertDialog backdrop behind the route before it unloads.

I've tried setting zIndex on the dialog element, but nothing works. Looked through expo-router / react-navigation documentation if there's some zIndex handling of views, but can't find anything 😅

Any suggestions what I do wrong, or need to change? Of course a lot of these dialogs are in beta 😄

In app/_layout.js

export default function Layout() {
	return (
		<GluestackUIProvider config={config}>
			<Stack>
				<Stack.Screen name="index" options={{ headerShown: false }} />
				<Stack.Screen
					name="modal"
					options={{
						presentation: "modal"
					}}
				/>
			</Stack>
		</GluestackUIProvider>
	);
}

and in app/modal.js

export default function Modal() {
	const [isOpen, setOpen] = useState(false);
	return (
		<View>
			<Button onPress={() => setOpen(true)}>
				<ButtonText>Open dialog</ButtonText>
			</Button>
			<AlertDialog isOpen={isOpen}>
				<AlertDialogBackdrop />
				<AlertDialogContent>
					<AlertDialogHeader>
						<Heading>Heading text</Heading>
						<AlertDialogCloseButton>
							<Icon as={CloseIcon} />
						</AlertDialogCloseButton>
					</AlertDialogHeader>
					<AlertDialogBody>
						<Text>Some body here</Text>
					</AlertDialogBody>
					<AlertDialogFooter>
						<ButtonGroup gap="$4">
							<Button onPress={onClose}>
								<ButtonText>{t("common.cancel")}</ButtonText>
							</Button>
						</ButtonGroup>
					</AlertDialogFooter>
				</AlertDialogContent>
			</AlertDialog>
		</View>
	);
}

[johanhermansson]

Solved it by switching from presentation modal to containedModal. Did not know about that 😅