Added initial map in homepage

app.json

@@ -26,6 +26,14 @@
     },
     "web": {
       "favicon": "./assets/favicon.png"
-    }
+    },
+    "plugins": [
+      [
+        "expo-location",
+        {
+          "locationAlwaysAndWhenInUsePermission": "Allow Stud-E to use your location."
+        }
+      ]
+    ]
   }
 }

package-lock.json

@@ -17,12 +17,14 @@
         "axios": "^1.4.0",
         "expo": "~48.0.18",
         "expo-linking": "~4.0.1",
+        "expo-location": "~15.1.1",
         "expo-status-bar": "~1.4.4",
         "moti": "^0.25.3",
         "react": "18.2.0",
         "react-native": "0.71.8",
         "react-native-dropdown-picker": "^5.4.6",
         "react-native-gesture-handler": "~2.9.0",
+        "react-native-maps": "^1.7.1",
         "react-native-reanimated": "~2.14.4",
         "react-native-safe-area-context": "4.5.0",
         "react-native-screens": "~3.20.0",
@@ -5238,6 +5240,11 @@
         }
       }
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.10",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz",
+      "integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA=="
+    },
     "node_modules/@types/hammerjs": {
       "version": "2.0.41",
       "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.41.tgz",
@@ -7431,6 +7438,14 @@
         "url-parse": "^1.5.9"
       }
     },
+    "node_modules/expo-location": {
+      "version": "15.1.1",
+      "resolved": "https://registry.npmjs.org/expo-location/-/expo-location-15.1.1.tgz",
+      "integrity": "sha512-hoKRlmi6Ya+NeZ72Zt385SDcSsIDpJI60TCBVO+Hc9xfKA9Hyminyyo5WiwI8J03igmPTCl8Y37MxBNKY9AWkg==",
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
     "node_modules/expo-modules-autolinking": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-1.2.0.tgz",
@@ -12227,6 +12242,24 @@
       "resolved": "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.71.19.tgz",
       "integrity": "sha512-1dVk9NwhoyKHCSxcrM6vY6cxmojeATsBobDicX0ZKr7DgUF2cBQRTKsimQFvzH8XhOVXyH8p4HyDSZNIFI8OlQ=="
     },
+    "node_modules/react-native-maps": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/react-native-maps/-/react-native-maps-1.7.1.tgz",
+      "integrity": "sha512-CHVLzL+Q2jiUGgbt4/vosxVI1SukWyaLGjD62VLgR/wZpnH4Umi9ql1bmKDPWcfj2C1QZwMU0Yc7rXTbvZUIiw==",
+      "dependencies": {
+        "@types/geojson": "^7946.0.10"
+      },
+      "peerDependencies": {
+        "react": ">= 17.0.1",
+        "react-native": ">= 0.64.3",
+        "react-native-web": ">= 0.11"
+      },
+      "peerDependenciesMeta": {
+        "react-native-web": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-native-reanimated": {
       "version": "2.14.4",
       "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-2.14.4.tgz",

package.json

@@ -18,12 +18,14 @@
     "axios": "^1.4.0",
     "expo": "~48.0.18",
     "expo-linking": "~4.0.1",
+    "expo-location": "~15.1.1",
     "expo-status-bar": "~1.4.4",
     "moti": "^0.25.3",
     "react": "18.2.0",
     "react-native": "0.71.8",
     "react-native-dropdown-picker": "^5.4.6",
     "react-native-gesture-handler": "~2.9.0",
+    "react-native-maps": "^1.7.1",
     "react-native-reanimated": "~2.14.4",
     "react-native-safe-area-context": "4.5.0",
     "react-native-screens": "~3.20.0",

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;