Press on textinput hides modal react-native-modal

Question

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

Answer 1

If you are using a modal inside of a component which is contained in a FlatList (such as in your example) and that component goes out of the viewport, the component will get culled and removed from the hierarchy. That means that the component and its children (including the modal) will stop from rendering.

When you open the text input, the keyboard covers the --Item component, the component gets culled and stops rendering and that means that the modal stops rendering as well.

You can stop this behaviour by setting removeClippedSubviews to false (not true). The docs state that the default value is false, but it's actually true on Android and false on iOS by default. That also means that this problem occurs only on android.