Added initial map in homepage

src/components/AnimatedContainer/AnimatedContainer.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
-import { View, Text } from "react-native";
+import { View, Text, ScrollView } from "react-native";
 import styles from "../../styles";
 import { colors } from "../../styles";
-import { MotiView } from "moti";
+import { MotiView, MotiScrollView } from "moti";
 export interface props {
   children: React.ReactNode;
 }

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>
   );

src/styles.tsx

@@ -1,4 +1,7 @@
-import { StyleSheet } from "react-native";
+import { StyleSheet, Dimensions } from "react-native";
+
+const width = Dimensions.get("window").width;
+const height = Dimensions.get("window").height;
 
 export const colors = {
   orange_1: "#FFBC72",
@@ -104,6 +107,10 @@ const styles = StyleSheet.create({
     width: "70%",
     marginVertical: 6,
   },
+  map: {
+    height: "50%",
+    width: "90%",
+  },
 });
 
 export default styles;