Modal prompts on iOS overlay the toast

[Kief5555]

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

[hmziqrs]

@Kief5555 Were you able to figure out a solution?

[Kief5555]

@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.

[devoren]

same issue

[jmcartlamy]

Are you tried this ? Notes regarding react-native-modal or NativeStackNavigator

[devoren]

@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

[QuixThe2nd]

Im getting the same issue too.

[alanschwarz]

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.

[hichemfantar]

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

[Kief5555]

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)

[hichemfantar]

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.

[moritzlang]

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.

[calummoore]

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 />
    </>
  )
}

[alexandrius]

Use FullWindowOverlay from react-native-screens

[lorenzomilesi]

The usage of FullWindowOverlay breaks accessibility

[robert-barahona]

The same is happening for our team 😕 we tried to put <Toast /> inside the screen but didn't work.