Merge pull request #4 from lemeow125/feature/location

Fixed button and text input styling and improved homepage

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",

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",

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%",
         },
       }}
     >

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<LocationType | null>(null);
   const [dist, setDist] = useState<number | null>(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() {
               }}
             />
             <Text style={styles.text_white_small}>
-              You are {dist}km away from USTP {"\n"}
+              {dist}km away from USTP {"\n"}
             </Text>
           </View>
         );
       }
     } else {
       return (
-        <View>
-          <Text style={styles.text_white_medium}>
-            Please allow location permission{"\n"}
-          </Text>
+        <AnimatedContainer>
+          <Text style={styles.text_white_medium}>{feedback}</Text>
           <Button onPress={() => requestLocation()} color={colors.blue_3}>
-            <Text style={styles.text_white_small}>Register</Text>
+            <Text style={styles.text_white_small}>Allow Access</Text>
           </Button>
-        </View>
+        </AnimatedContainer>
       );
     }
   }

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,