Fixing bug in loading modal

src/app/components/LoadingMarkersModal.js

@@ -9,42 +9,32 @@ 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 }) {
-  return (
-    <Modal
-      transparent={true}
-      animationType="slide"
-      visible={show}
-      supportedOrientations={["portrait"]}
-    >
-      <View
-        style={{
-          justifyContent: "center",
-          alignSelf: "center",
-          width: "100%",
-          height: "100%",
-        }}
-      >
-        <View style={styles.container}>
-          <MaterialCommunityIcons
-            name="sync"
-            size={48}
-            color={colors.primary}
-            style={{ alignSelf: "center", marginBottom: 12 }}
-          />
-          <Text style={styles.text}>
-            Aguarde um momento enquanto os dados são carregados
-          </Text>
-        </View>
+  if (show) {
+    return (
+      // 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}
+          color={colors.primary}
+          style={{ alignSelf: "center", marginBottom: 12 }}
+        />
+        <Text style={styles.text}>
+          Aguarde um momento enquanto os dados são carregados
+        </Text>
       </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>
   );
 }