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.
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 want to do this layout:
Currently I do the layout by this way:
menu is belong to the below part and i marginTop: -30 for it to above the image
FlatList is absolute view and have zIndex bigger than Menu. FlatList have dynamic data and each item of FlatList have textInput to search data ( look at this pic )
I have tried 2 ways:
First way:
I used for the list filtered data, it is limited by the Flatlist area so that my filtered list cannot display fully, just 2 rows visible, the rest of filtered data is invisible. I have tried increase the height of the Flatlist and now I can see the filtered list fully but I cannot click the menu button because menu is overived by the Flatlist,
Second way
I use Modal and tried with this library: react-native-modal-dropdown, I can reach my expertation UI but because it use Modal so when Modal is appearing, my textInput in Item is loss focus, so that I cannot continually input to TextInput until I close the Modal.
Do you guys have any solution for it? Thanks in advance
The modal component use the native Modal, you won't be able to interact with elements outside it while it is still visible.
I am not sure to understand why you cannot use View to display the results, but maybe you could try with FlatList ?
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.