From 36f083c898468422b4edf963ccb47f35dce7ac88 Mon Sep 17 00:00:00 2001 From: Keannu Bernasol Date: Fri, 7 Jul 2023 14:21:28 +0800 Subject: [PATCH] Added initial map in homepage --- app.json | 10 +++++- package-lock.json | 33 +++++++++++++++++ package.json | 2 ++ .../AnimatedContainer/AnimatedContainer.tsx | 4 +-- src/routes/Home/Home.tsx | 35 +++++++++++++++++-- src/styles.tsx | 9 ++++- 6 files changed, 87 insertions(+), 6 deletions(-) diff --git a/app.json b/app.json index ca641e0..4802c78 100644 --- a/app.json +++ b/app.json @@ -26,6 +26,14 @@ }, "web": { "favicon": "./assets/favicon.png" - } + }, + "plugins": [ + [ + "expo-location", + { + "locationAlwaysAndWhenInUsePermission": "Allow Stud-E to use your location." + } + ] + ] } } diff --git a/package-lock.json b/package-lock.json index 02e3d1a..f41b725 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 3caa37d..f9621d3 100644 --- a/package.json +++ b/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", diff --git a/src/components/AnimatedContainer/AnimatedContainer.tsx b/src/components/AnimatedContainer/AnimatedContainer.tsx index 838a688..aade0dc 100644 --- a/src/components/AnimatedContainer/AnimatedContainer.tsx +++ b/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; } diff --git a/src/routes/Home/Home.tsx b/src/routes/Home/Home.tsx index 96c6532..6aed10a 100644 --- a/src/routes/Home/Home.tsx +++ b/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(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 ( Template Homepage - {JSON.stringify(creds)} + + + User Location:{" "} + {location + ? `${location.coords.latitude}, ${location.coords.longitude}` + : "Loading..."} + ); diff --git a/src/styles.tsx b/src/styles.tsx index 6700f9a..3f0057f 100644 --- a/src/styles.tsx +++ b/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;