From 724cc788f3611ef77c1237bc034674ffccb34e51 Mon Sep 17 00:00:00 2001 From: Keannu Bernasol Date: Fri, 7 Jul 2023 18:10:08 +0800 Subject: [PATCH] Fixed button and text input styling and improved homepage --- package-lock.json | 19 ++++++++++++++----- package.json | 5 +++-- src/components/Button/Button.tsx | 1 - src/routes/Home/Home.tsx | 29 ++++++++++++++++++----------- src/styles.tsx | 4 +++- 5 files changed, 38 insertions(+), 20 deletions(-) diff --git a/package-lock.json b/package-lock.json index f41b725..27e114a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "@tanstack/react-query": "^4.29.19", "axios": "^1.4.0", "expo": "~48.0.18", + "expo-intent-launcher": "~10.5.2", "expo-linking": "~4.0.1", "expo-location": "~15.1.1", "expo-status-bar": "~1.4.4", @@ -24,7 +25,7 @@ "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-maps": "1.3.2", "react-native-reanimated": "~2.14.4", "react-native-safe-area-context": "4.5.0", "react-native-screens": "~3.20.0", @@ -7418,6 +7419,14 @@ "expo": "*" } }, + "node_modules/expo-intent-launcher": { + "version": "10.5.2", + "resolved": "https://registry.npmjs.org/expo-intent-launcher/-/expo-intent-launcher-10.5.2.tgz", + "integrity": "sha512-qFIanCkLlTvqYTtJQJocZuZesi6b8lAdY9xF3oLFsdaTXKIMrfQfWI67zwBJvaNqgiV9MbbYnBHsFoOAzhBTKA==", + "peerDependencies": { + "expo": "*" + } + }, "node_modules/expo-keep-awake": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/expo-keep-awake/-/expo-keep-awake-12.0.1.tgz", @@ -12243,11 +12252,11 @@ "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==", + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/react-native-maps/-/react-native-maps-1.3.2.tgz", + "integrity": "sha512-NB7HGRZOgxxXCWzrhIVucx/bsrEWANvk3DLci1ov4P9MQnEVQYQCCkTxsnaEvO191GeBOCRDyYn6jckqbfMtmg==", "dependencies": { - "@types/geojson": "^7946.0.10" + "@types/geojson": "^7946.0.8" }, "peerDependencies": { "react": ">= 17.0.1", diff --git a/package.json b/package.json index f9621d3..7279bf6 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@tanstack/react-query": "^4.29.19", "axios": "^1.4.0", "expo": "~48.0.18", + "expo-intent-launcher": "~10.5.2", "expo-linking": "~4.0.1", "expo-location": "~15.1.1", "expo-status-bar": "~1.4.4", @@ -25,13 +26,13 @@ "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", "react-native-svg": "13.4.0", "react-redux": "^8.1.1", - "redux": "^4.2.1" + "redux": "^4.2.1", + "react-native-maps": "1.3.2" }, "devDependencies": { "@babel/core": "^7.20.0", diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 83b9d7b..43aaf84 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -23,7 +23,6 @@ export default function Button({ disabled = false, ...props }: props) { ? `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0.3)` : "rgba(0, 0, 0, 0)" : props.color, - width: "50%", }, }} > diff --git a/src/routes/Home/Home.tsx b/src/routes/Home/Home.tsx index 31fdb1b..5805287 100644 --- a/src/routes/Home/Home.tsx +++ b/src/routes/Home/Home.tsx @@ -9,19 +9,27 @@ import * as Location from "expo-location"; import GetDistance from "../../components/GetDistance/GetDistance"; import Button from "../../components/Button/Button"; import { colors } from "../../styles"; +import { startActivityAsync, ActivityAction } from "expo-intent-launcher"; type LocationType = Location.LocationObject; export default function Home() { const [location, setLocation] = useState(null); const [dist, setDist] = useState(null); + const [feedback, setFeedback] = useState( + "To continue, please allow Stud-E permission to location services" + ); async function requestLocation() { let { status } = await Location.requestForegroundPermissionsAsync(); - if (status !== "granted") { - console.error("Permission to access location was denied"); - return; - } else { + if (status === "granted") { getLocation(); + return; + } else if (status === "denied") { + setFeedback("Stud-E requires location services to function"); + setTimeout(() => { + startActivityAsync(ActivityAction.LOCATION_SOURCE_SETTINGS); + }, 3000); + console.log("Location Permission denied"); } } @@ -39,6 +47,7 @@ export default function Home() { useEffect(() => { requestLocation(); }, []); + const ustpCoords = { latitude: 8.4857, longitude: 124.6565, @@ -77,21 +86,19 @@ export default function Home() { }} /> - You are {dist}km away from USTP {"\n"} + {dist}km away from USTP {"\n"} ); } } else { return ( - - - Please allow location permission{"\n"} - + + {feedback} - + ); } } diff --git a/src/styles.tsx b/src/styles.tsx index 31bc34a..e0a654d 100644 --- a/src/styles.tsx +++ b/src/styles.tsx @@ -88,19 +88,21 @@ const styles = StyleSheet.create({ justifyContent: "center", alignSelf: "center", alignItems: "center", + textAlign: "center", display: "flex", flexDirection: "row", marginVertical: 4, marginHorizontal: 8, padding: 8, borderRadius: 16, + width: width * 0.4, }, text_input: { color: colors.text_default, backgroundColor: colors.blue_1, - width: "50%", padding: 10, borderRadius: 8, + width: width * 0.5, }, dropdown_template: { borderRadius: 16,