I'm working on a react-native + expo application. I have a screen Home with a fox template (.glb with react-three/fiber) in the middle and a Navbar at the bottom. I have a button in my Navbar which allows me to unfold a Modal (ClothesScreen) which takes up 30% of the bottom of the screen (enough to display content and to leave the fox visible in the background). In this Modal I have a FlatList of items. I'm trying to make an item from the FlatList draggable to the fox modele.
My problem: I use react-native-gesture-handler and react-native-reanimated to make my item draggable but when I drag my item outside the FlatList it goes below all the content. I tried to fix the problem using zIndex but it didn't work at all. I tried using Portals (@gorhom/portal) which fixed my problem but made my FlatList unusable because Portals seem to overload its style, displaying the items vertically when I want them horizontally ect.... I haven't found a solution to correct this problem, does anyone have any ideas on this style problem?
I'm working on a
react-native + expoapplication. I have a screen Home with a fox template (.glb withreact-three/fiber) in the middle and a Navbar at the bottom. I have a button in my Navbar which allows me to unfold aModal(ClothesScreen) which takes up 30% of the bottom of the screen (enough to display content and to leave the fox visible in the background). In thisModalI have aFlatListof items. I'm trying to make an item from theFlatListdraggable to the fox modele.My problem: I use
react-native-gesture-handlerandreact-native-reanimatedto make my item draggable but when I drag my item outside theFlatListit goes below all the content. I tried to fix the problem usingzIndexbut it didn't work at all. I tried usingPortals(@gorhom/portal) which fixed my problem but made myFlatListunusable becausePortalsseem to overload its style, displaying the items vertically when I want them horizontally ect.... I haven't found a solution to correct this problem, does anyone have any ideas on this style problem?