Added initial map in homepage

src/routes/Home/Home.tsx

@@ -1,17 +1,48 @@
-import * as React from "react";
 import styles from "../../styles";
 import { View, Text } from "react-native";
 import { useSelector } from "react-redux";
 import { RootState } from "../../features/redux/Store/Store";
 import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
+import React, { useState, useEffect } from "react";
+import MapView, { Marker, UrlTile } from "react-native-maps";
+import * as Location from "expo-location";
 
+type LocationType = Location.LocationObject;
 export default function Home() {
+  const [location, setLocation] = useState<LocationType | null>(null);
+
+  useEffect(() => {
+    (async () => {
+      let { status } = await Location.requestForegroundPermissionsAsync();
+      if (status !== "granted") {
+        console.error("Permission to access location was denied");
+        return;
+      }
+      let location = await Location.getCurrentPositionAsync({});
+      setLocation(location);
+    })();
+  }, []);
+
+  function getInitialState() {
+    return {
+      latitude: 8.4857,
+      longitude: 124.6565,
+      latitudeDelta: 0.000235,
+      longitudeDelta: 0.000067,
+    };
+  }
   const creds = useSelector((state: RootState) => state.user.user);
   return (
     <View style={styles.background}>
       <AnimatedContainer>
         <Text style={styles.text_white_large}>Template Homepage</Text>
-        <Text style={styles.text_white_tiny}>{JSON.stringify(creds)}</Text>
+        <MapView style={styles.map} initialRegion={getInitialState()}></MapView>
+        <Text style={styles.text_white_medium}>
+          User Location:{" "}
+          {location
+            ? `${location.coords.latitude}, ${location.coords.longitude}`
+            : "Loading..."}
+        </Text>
       </AnimatedContainer>
     </View>
   );