Fixing bug in loading modal

src/app/components/LoadingMarkersModal.js

@@ -9,25 +9,13 @@ import {
 
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 import colors from "../config/colors";
-import { dimensions } from "../config/dimensions";
+import { dimensions, screen_height } from "../config/dimensions";
 
 export default function LoadingMarkersModal({ show }) {
+  if (show) {
     return (
-    <Modal
-      transparent={true}
-      animationType="slide"
-      visible={show}
-      supportedOrientations={["portrait"]}
-    >
-      <View
-        style={{
-          justifyContent: "center",
-          alignSelf: "center",
-          width: "100%",
-          height: "100%",
-        }}
-      >
-        <View style={styles.container}>
+      // 267 = (tabBar height = 49) + (data menu btn height = 48) + (this modal = 170/2)
+      <View style={[styles.container, { bottom: (screen_height - 267) / 2 }]}>
         <MaterialCommunityIcons
           name="sync"
           size={48}
@@ -38,13 +26,15 @@ export default function LoadingMarkersModal({ show }) {
           Aguarde um momento enquanto os dados são carregados
         </Text>
       </View>
-      </View>
-    </Modal>
     );
+  } else {
+    return <></>;
+  }
 }
 
 const styles = StyleSheet.create({
   container: {
+    position: "absolute",
     width: "80%",
     height: 170,
     justifyContent: "center",

src/app/screens/MapFeedScreen.js

@@ -29,14 +29,14 @@ export default function MapFeedScreen(props) {
 
   return (
     <View style={styles.container}>
-      <LoadingMarkersModal
-        show={markers.markers.size <= 0}/>
       <OpenStreetMap
         markers={markers}
         centerUserLocation={true}
         dataOptionsToShow={dataOptionsToShow}
         setDataOptionsToShow={setDataOptionsToShow}
       />  
+      <LoadingMarkersModal
+        show={markers.markers.size <= 0}/>
     </View>
   );
 }