react-native-toast-message
react-native-toast-message copied to clipboard
Modal prompts on iOS overlay the toast
Describe the bug
When a modal is prompted on ios calling Toast.show
makes the toast appear UNDER the modal resulting in a 50% view of the toast (because of the modal that is blocking it)
Steps to reproduce Steps to reproduce the behavior:
<Stack>
<Stack.Screen name="(tabs)" options={{headerShown: false, headerBackTitle: ''}} />
<Stack.Screen
name="example"
options={{
title: example,
presentation: 'modal',
}}/>
</Stack>
</ThemeProvider>
<Toast config={toastConfig} />
Open the modal on iOS call toast.show
Expected behavior
For it to overlay/go above the modal
Screenshots
Above the modal, I have a custom toast configuration that's partially visible. Code sample Using react-nativgation and expo router (default tabs template with expo)
Environment (please complete the following information):
- OS: iOS
- react-native-toast-message version: latest
- react-native version SDK 49
@Kief5555 Were you able to figure out a solution?
@Kief5555 Were you able to figure out a solution?
No, I might try to import the toast in the modal and try to display it there.
same issue
Are you tried this ? Notes regarding react-native-modal or NativeStackNavigator
@jmcartlamy Hey! I'm using an Expo router so if I use it this way I get a warning. Also i saw this comment https://github.com/calintamas/react-native-toast-message/issues/195#issuecomment-890760286 so i will try containedModal
Im getting the same issue too.
Any news on this? Using 'containedModal' as suggested in #195 is not a sustainable solution. The user looses the ability to swipe down the modal on iOS, therefore compromising intuitive behaviour of the app.
On IOS you have create a new toast element inside each modal, refs are auto handled https://github.com/calintamas/react-native-toast-message/blob/main/docs/modal-usage.md#notes-regarding-react-native-modal-or-nativestacknavigator
On IOS you have create a new toast element inside each modal, refs are auto handled
https://github.com/calintamas/react-native-toast-message/blob/main/docs/modal-usage.md#notes-regarding-react-native-modal-or-nativestacknavigator
This is a different type of modal, I think. Shown in the screenshot is the native Modal Component (not view)
On IOS you have create a new toast element inside each modal, refs are auto handled https://github.com/calintamas/react-native-toast-message/blob/main/docs/modal-usage.md#notes-regarding-react-native-modal-or-nativestacknavigator
This is a different type of modal, I think. Shown in the screenshot is the native Modal Component (not view)
It's the same for both stack modals and the RN Modal component.
Rendering content on top of native views (presentation="modal"
) is a bit tricky. What works for me is rendering the Toast
component again in the Screen using @gorhom/portal
as following:
<Portal hostName="toast">
<FullWindowOverlay>
<Toast />
</FullWindowOverlay>
</Portal>
Be aware that this solution does not work when running the app on the simulator. It somehow only works on the final build. See React Native Screens Integration docs for more details.
For me, it worked when I added the Toast to the modal view, but the Toast has to be the last component.
export function ModalView({ children }: ModalViewProps) {
return (
<>
{children}
<Toast />
</>
)
}