-
Notifications
You must be signed in to change notification settings - Fork 250
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Modal prompts on iOS overlay the toast #494
Comments
@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 #195 (comment) 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. |
On IOS you have create a new toast element inside each modal, refs are auto handled |
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 ( <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. |
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 />
</>
)
} |
Use |
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:
Open the modal on iOS call toast.show
![image](https://private-user-images.githubusercontent.com/67562560/278833608-c8bab246-ae6f-453e-a949-5ecf92256911.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTg5MDYyNDksIm5iZiI6MTcxODkwNTk0OSwicGF0aCI6Ii82NzU2MjU2MC8yNzg4MzM2MDgtYzhiYWIyNDYtYWU2Zi00NTNlLWE5NDktNWVjZjkyMjU2OTExLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjIwVDE3NTIyOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTE1MTExNWUyZTgwZDM5NTgyMDYwNzZkNjY2OTgzMWFjMTc3OWUyYzIzMmVmZGU4MjI1YWQyYWFkMDk4NDhiZWEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.dDPlKddbKkeURGMgLKHuRzQOUBcEgTbdq7N0Dh8Khs4)
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):
The text was updated successfully, but these errors were encountered: