I am using react-native-modal. I am using modal's overlay, and the button which opens up modal, changes to cross button, but it stays behind the overlay of modal. I want that button to be on top of modal when modal is visible. I have already tried zIndex with the button but it didn't work. Need help with this. Thanks in advance.
Something like this but with modal overlay:
The Modal component of react native traps the focus inside the modal content while visible. The only way to capture a click on the button is to display another copy of it inside the Modal component. If you manage to display it at the same position, the user won't see that it's another button.
Related
I have an issue with scrolling the content within a modal. I am using a Chakra UI modal and when I click on an input field, the keyboard pops up and I am unable to scroll to the end of the modal. Similarly, when I click on the bottom of the modal, I am unable to scroll up. but When I close the keyboard, I am able to scroll the entire content in the modal. enter image description here
I have searched the entire internet for a solution but have not been able to find one. [[text]
I'm using a webview to show a html content, this html have links. I put a TouchableWithoutFeedback to open a link, I tried to emulated the button action of android so I put this button with position absolute. my problem is that when the button is above a link and I touch the button, react native open the link in the webview and the link in my button, I try to put TouchableWithoutFeedback inside a view to use onTouchStart and onTouchEnd with stopPropagation, but this doesn't work, Do you know a ways to stop propagation in these cases?
I tried with pointerEvents="none" in a view with the webview but this cancel all the links, as could be expected.
I tried to change pointerEvents to none in an onTouchStart and after change pointerEvents to auto in a onTouchEnd in a view with my TouchableWithoutFeedback, but it doesn't work.
Thanks for your help!
I created a bottom tab bar, when press on the bottom tab bar, will toggle a modal. Now my modal is blocking the bottom tab bar, so I am not able to press on the bottom tab bar to close my modal.
Any solution for this? I've tried zIndex, and adjust the marginBottom for the modal (move it up), but both are not working
Unfortunatelly, you can not do this. As told in this piece of documentation:
A modal displays content that temporarily blocks interactions with the main view.
So this is indeed the expected behavior.
Did you try with
fullScreen={false}
transparent={true}
then set margin-bottom
I am rendering Flatlist which render list of items each item have button and modal inside it when the button pressed the modal shall open, each modal have some text inputs inside it
so the hierarchy is as the following :
Screen
-FlatList
--Item
---Button
---Modal
----TextInput
When I open press on the first item's button the modal opens and everything works great, but when I scroll down in the Flatlist and press on the last item and open the modal open then I try to write on the modal's textinput the modal disappears.
I am sure that the modal exists but I cannot see it, Any help?
GIF explaining what I mean
I suffered from the same issue and after digging into this subject, I do not think there is any other way than taking the modal out of FlatList.
Seems that there is a bug in Android with a modal with textinput inside a FlatList, which caused when the keyboard expands.
When modal is outside of the FlatList, works like a charm.
How to open a view top of a another view on the button click in react native? I tried use redux but i didn't find the right way to do it.
You mean "How to open a popup type screen on a button click"?
If so, then you need to use Modal component.
Here's the link to the docs of modal component -
https://facebook.github.io/react-native/docs/modal