-
-
Notifications
You must be signed in to change notification settings - Fork 531
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
Display any view on top of native-stack's modal #525
Comments
I've got the same issue. iOS-Modal issue only. |
same issue |
This issue is known and also reported by me. You can't even toggle the element inspector on the modal. They managed to get EXPOs Dev Menu finally to overlay the modal, but not sure about any other view. The modal is currently the most top element that nothing can overlap. I also had issues with in-app-notifications and worked around displaying them inside the modal when modal was open - but yeah, there should be another method for it. Maybe we need to wrap a provider for that native-modal and let it mount there - dunno if thats even possible, just thinking. P:S the modal from |
@hirbod how Modal from react-native can overlap? I've tested it for a while, but modal just invisible and dismisses almost right after mounted. |
@Strate https://streamable.com/mtsbmh here, from my app |
@hirbod wow, awesome! This is looks like Shared Element Transition, but with Modal? |
Yes, tooked me a crazy amount of time and is not smooth on android :D |
@hirbod could you please share some code for Modal from react-native? Which presentation used for display over screen's modal? Because my modal still invisible :( |
@Strate its nothing special. import { Modal } from "react-native";
....
...
...
renderFullscreen = () => {
return (
<Modal
transparent
visible={fullscreen}
onShow={this.handleModalShow}
onRequestClose={this.close}
/>
)}; I think the important thing is that Modal isn't rendered on mount. My modal gets rendered when my Image receives an onPress. I have an if-statement around my Modal in my code. And my renderFullScreen returns the Modal and unmounts again in my close function. My onPress sets the state fullscreen to return (
<View>
<TouchableWithoutFeedback onPress={....}>
<View>
<ImageCustom />
</View>
</TouchableWithoutFeedback>
{fullscreen && this.renderFullscreen()}
</View>
); |
I've the same issue, I'm trying to display a loader but can't draw over the 'formsheet' modal. <>
<NavigationContainer>
<Stack.Navigator screenOptions={{ stackPresentation: 'formSheet' }} .... >
</NavigationContainer>
<View style={{
...Stylesheet.absoluteFillObject,
zIndex: 1000,
backgroundColor: 'rgba(0,0,0,0.4)'
}}/> /* <<< */
</> |
Can you provide a repo with the thing you want to achieve so I could work on it? |
Hi @WoLewicki https://github.com/a-eid/react-native-native-stack-global-loader you can see that when we have a I wan't to do another example for toast but it basically is the same idea. thank you. |
it's also worth noting that this happens also with other modals. |
also a modal screen (using stackPresentation:modal) does not pop up over a react-native-modal's modal component. |
@a-eid regarding your example: the loader will not load above the modal this way since all the views displayed under the root view of the application will be displayed also under the modal screens. You can spot the same thing while using <Stack.Screen
name="modal-screen"
options={{
stackPresentation: 'formSheet',
}}>
{() => (
<GlobalLoader>
<ModalScreen />
</GlobalLoader>
)}
</Stack.Screen> Then the Another option, maybe even better, is to make the @Abhishek12345679 yes, because it messes with the modal stack of |
@WoLewicki thank you for the reply. I'm wondering how would you display toasts on a 'formSheet' screens ? |
About the first question, what is the difference of having About the second question, I am not sure what you mean. If you mean to control the transition of the modal appearing then no, since it is controlled by a native |
global toasts are great when you have a background task ( socket connection or even an api request ). and you wanna notify the user when the task is finish ( success | error ). there is no way to find out where the user is on the app. global toasts & loaders have a single mount point which is really great for those cases and convenient for almost all other cases. I'm not really that familiar with IOS but do u think there is a way to do that on ios Natively ? |
You can read more about how certain interactions with user on iOS should be implemented in Apple's HIG. You can look at e.g. Alert Views and then look for libraries in react-native that implement those things. Also, I think it is just not possible to have the listener for such events in one place only when trying to use native iOS modal views since they simply aren't children of |
@WoLewicki thank you very much, I'll be reading more about it. |
Can I close this issue then? @Strate do you any more information? |
@WoLewicki looks like there is still no solution to display any view on top of modal ^( |
@Strate you can do it as long as you are displaying it in the |
@WoLewicki thats okay for alerts, for example, but not great for toasts :( This is how toasts looks like when rendered inside Screen which displayed in modal: |
I'm having the same issue. I can append my view to UIWindow on the native side, and it will appear on top. But the problem is that I have a ViewController with IBActions etc, and afaik you can't append a ViewController to UIWindow (?). Or do you know if there's another way to natively append a ViewController to the |
@WoLewicki thank you for suggestion! |
Here is the code which adds the monitor to the |
@WoLewicki that would be awesome, thank you. |
I added a PoC package where you can render a |
@WoLewicki I'm testing it rn, do you think you'll keep it as a separate package or will you be adding it to edit: it's only draggable, it doesn't allow touches, do u think I can try and fix it ? been trying to fix it but observations: The modal does display on top of if the |
I think it will now be a separate package since
I fixed it in
Yes, because the modal and |
@WoLewicki now Touchables work inside of the |
I'm a bit new to this thread, and I'm not exactly sure how the iOS Window works. @WoLewicki does the package you linked to solve the problem of rendering toasts on top of any modal? I have some UI providers (bottom sheet menu, toast notifications) at the root of my app, and I'd like them to render on top of any content. |
@nandorojo the package work similar to |
I see, you mean last in the component tree, right? As in, if I render this after my native stack, it should be fine. Can treat this component as a sort of a Portal for components at the root of the app that need to render on top of everything? |
yes and no. you see if you render this component then trigger a modal, the modal will display on top of the component. |
Oh, so it's based on the time of rendering? As if it were attached to the window imperatively? |
I added an option for the toast to stay on top even after pushing modals after it was rendered (see WoLewicki/react-native-window-view#2 (comment)). This library is kind of a PoC still, so if you see any bugs/inconsistencies, please report them there. |
@WoLewicki thank you so much, I will be testing this lib extensively in a couple of apps that we have, will report and if possible contribute. |
@WoLewicki thanks! Is this a prop on the JS side? I don't know my way around native code so I'm not sure exactly what I should be doing. Also, are pointed events configurable? I'd like to set it to box-none, not sure what the default behavior is. Thanks again. |
It requires adding code in your app's |
@WoLewicki positional style do work but not all styles, for example also pointerEvents doesn't seem to be working. |
does having is that necessary and could that be the issue why also is there a reason we are using I tried adding |
@a-eid I think I answered the questions in your issue in the repo, and I think we should keep the discussion there since it is connected to it. |
@WoLewicki is it possible that your PoC will make it into the screens package? I find it really necessary to render content arbitrarily on top of a modal from the root of the app. This includes toasts, menus, portals, alert dialogues, etc. I'm working on a design system like Radix / HeadlessUI for React Native, and it requires using a portal at the root of the app for those use cases, among others. It would be great for the API to be like so: <WindowView>
{children}
</WindowView> Where:
Does this seem realistic? I think it would add a lot to screens. I wish I could help implement it, I just don't know any native code. Thanks again for all the great work here! |
I think |
After some discussion, we decided to move |
is FullWindowOverlay from "react-native-screens".. |
Hello, thank you for this awesome library.
Is there any possible solution to display any view on top of visible stack's modal?
I realized, that react-native-modal is not visible over stack's modal, and also there is no way to display any view on top of screen. For example, I need to display in-app-notification on top of all content, or sometime display modal loader spinner - both of them are not appears when stack's modal is visible.
This is related to ios only, android works fine.
The text was updated successfully, but these errors were encountered: