3

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

Hazem Khairy Mohamed
  • 63
  • 1
  • 7
  • could you show some code when you click button how modal is showing and when its hiding? – newdeveloper Jul 10 '20 at 04:57
  • Have you fixed it ? – Mauricio Javier Biott Mar 21 '21 at 12:14
  • @MauricioJavierBiott Yes, I changed the hierarchy. I extracted The Modal from the item and inserted it beside the flat list, and I created a function to open/close the modal and passed it to the items. I am not sure what the problem was but changing the hierarchy of the components solved it. – Hazem Khairy Mohamed Mar 24 '21 at 00:04
  • @HazemKhairyMohamed Could you please elaborate on your solution? I'm struggling to solve this, I'll really appreciate this. – IdoS Sep 21 '21 at 22:20
  • 2
    FlatList prop: `removeClippedSubviews = true` is causing the issue because it is the default for Android. Check the prop and warning, here: https://reactnative.dev/docs/flatlist#removeclippedsubviews – Wilber Hinojosa Jun 01 '22 at 01:14

1 Answers1

0

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.

IdoS
  • 482
  • 1
  • 10
  • 18