Merge pull request #23 from VedantPy/main

Added expo-location to fetch user's location

app.json

@@ -32,6 +32,12 @@
       "favicon": "./assets/images/favicon.png"
     },
     "plugins": [
+      [
+        "expo-location",
+        {
+          "locationAlwaysAndWhenInUsePermission": "Allow Yatrazen to use your location."
+        }
+      ],
       "expo-router"
     ],
     "experiments": {

app/_layout.jsx

@@ -1,10 +1,37 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Stack } from "expo-router";
 import { DarkTheme, ThemeProvider } from "@react-navigation/native";
+import * as Location from "expo-location";
+import { UserLocationContext } from "./context/UserLocationContext";
 
 const _layout = () => {
+    const [location, setLocation] = useState(null);
+    const [errorMsg, setErrorMsg] = useState(null);
+
+    useEffect(() => {
+      (async () => {
+
+        let { status } = await Location.requestForegroundPermissionsAsync();
+        if (status !== 'granted') {
+          setErrorMsg('Permission to access location was denied');
+          return;
+        }
+
+        let location = await Location.getCurrentPositionAsync({});
+        setLocation(location);
+        console.log(location)
+      })();
+    }, []);
+
+    let text = 'Waiting..';
+    if (errorMsg) {
+      text = errorMsg;
+    } else if (location) {
+      text = JSON.stringify(location);
+    }
   return (
     <ThemeProvider value={DarkTheme}>
+      <UserLocationContext.Provider value={{location, setLocation}}>
       <Stack
         screenOptions={{
           headerShown: false,
@@ -13,6 +40,7 @@ const _layout = () => {
           autoHideHomeIndicator: true,
         }}
       />
+      </UserLocationContext.Provider>
     </ThemeProvider>
   );
 };

app/context/UserLocationContext.jsx

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export const UserLocationContext = createContext(null);

app/explore/MapStyle.json

@@ -0,0 +1,160 @@
+[
+    {
+      "elementType": "geometry",
+      "stylers": [
+        {
+          "color": "#f5f5f5"
+        }
+      ]
+    },
+    {
+      "elementType": "labels.icon",
+      "stylers": [
+        {
+          "visibility": "off"
+        }
+      ]
+    },
+    {
+      "elementType": "labels.text.fill",
+      "stylers": [
+        {
+          "color": "#616161"
+        }
+      ]
+    },
+    {
+      "elementType": "labels.text.stroke",
+      "stylers": [
+        {
+          "color": "#f5f5f5"
+        }
+      ]
+    },
+    {
+      "featureType": "administrative.land_parcel",
+      "elementType": "labels.text.fill",
+      "stylers": [
+        {
+          "color": "#bdbdbd"
+        }
+      ]
+    },
+    {
+      "featureType": "poi",
+      "elementType": "geometry",
+      "stylers": [
+        {
+          "color": "#eeeeee"
+        }
+      ]
+    },
+    {
+      "featureType": "poi",
+      "elementType": "labels.text.fill",
+      "stylers": [
+        {
+          "color": "#757575"
+        }
+      ]
+    },
+    {
+      "featureType": "poi.park",
+      "elementType": "geometry",
+      "stylers": [
+        {
+          "color": "#e5e5e5"
+        }
+      ]
+    },
+    {
+      "featureType": "poi.park",
+      "elementType": "labels.text.fill",
+      "stylers": [
+        {
+          "color": "#9e9e9e"
+        }
+      ]
+    },
+    {
+      "featureType": "road",
+      "elementType": "geometry",
+      "stylers": [
+        {
+          "color": "#ffffff"
+        }
+      ]
+    },
+    {
+      "featureType": "road.arterial",
+      "elementType": "labels.text.fill",
+      "stylers": [
+        {
+          "color": "#757575"
+        }
+      ]
+    },
+    {
+      "featureType": "road.highway",
+      "elementType": "geometry",
+      "stylers": [
+        {
+          "color": "#dadada"
+        }
+      ]
+    },
+    {
+      "featureType": "road.highway",
+      "elementType": "labels.text.fill",
+      "stylers": [
+        {
+          "color": "#616161"
+        }
+      ]
+    },
+    {
+      "featureType": "road.local",
+      "elementType": "labels.text.fill",
+      "stylers": [
+        {
+          "color": "#9e9e9e"
+        }
+      ]
+    },
+    {
+      "featureType": "transit.line",
+      "elementType": "geometry",
+      "stylers": [
+        {
+          "color": "#e5e5e5"
+        }
+      ]
+    },
+    {
+      "featureType": "transit.station",
+      "elementType": "geometry",
+      "stylers": [
+        {
+          "color": "#eeeeee"
+        }
+      ]
+    },
+    {
+      "featureType": "water",
+      "elementType": "geometry",
+      "stylers": [
+        {
+          "color": "#c9c9c9"
+        }
+      ]
+    },
+    {
+      "featureType": "water",
+      "elementType": "labels.text.fill",
+      "stylers": [
+        {
+          "color": "#9e9e9e"
+        }
+      ]
+    }
+  ]

app/explore/page.jsx

@@ -1,24 +1,53 @@
-import { View, Text, Dimensions } from "react-native";
-import React from "react";
+import { View, Text, Dimensions, Image } from "react-native";
+import React, { useContext } from "react";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { StatusBar } from "expo-status-bar";
 import BackNav from "../components/BackNav";
 import MapView from "react-native-maps";
+import { UserLocationContext } from "../context/UserLocationContext";
+import { Marker } from "react-native-maps";
+import MapStyle from "./MapStyle.json";
 
 const page = () => {
   // get current route path
 
+  const { location, setLocation } = useContext(UserLocationContext);
   const screenHeight = Dimensions.get("window").height;
   return (
-    <SafeAreaView>
-      <StatusBar style="light" backgroundColor="#000" />
-      <View style={{ backgroundColor: "#000", height: screenHeight }}>
-        <BackNav path={"/"} />
-        <View>
-          <MapView style={{ width: 400, height: 300 }}></MapView>
+    location?.coords.latitude && (
+      <SafeAreaView>
+        <StatusBar style="light" backgroundColor="#000" />
+        <View style={{ backgroundColor: "#000", height: screenHeight }}>
+          <BackNav path={"/"} />
+          <View>
+
+            <MapView
+              style={{ width: 400, height: 300 }}
+              customMapStyle={MapStyle}
+              region={{
+                latitude: location?.coords.latitude,
+                longitude: location?.coords.longitude,
+                latitudeDelta: 0.0222,
+                longitudeDelta: 0.0221,
+              }}
+            >
+              <Marker
+                coordinate={{
+                  latitude: location?.coords.latitude,
+                  longitude: location?.coords.longitude,
+                }}
+              >
+                <Image
+                  source={require("../../assets/images/marker.png")}
+                  style={{ width: 30, height: 30 }}
+                />
+              </Marker>
+            </MapView>
+
+          </View>
         </View>
-      </View>
-    </SafeAreaView>
+      </SafeAreaView>
+    )
   );
 };
 

package.json

@@ -23,6 +23,7 @@
     "expo-crypto": "~12.4.1",
     "expo-font": "~11.4.0",
     "expo-linking": "~5.0.2",
+    "expo-location": "~16.1.0",
     "expo-random": "~13.2.0",
     "expo-router": "^2.0.0",
     "expo-splash-screen": "~0.20.5",
@@ -35,12 +36,13 @@
     "react-native-dotenv": "^3.4.9",
     "react-native-dropdown-select-list": "^2.0.5",
     "react-native-gesture-handler": "~2.12.0",
+    "react-native-google-places-autocomplete": "^2.5.6",
+    "react-native-maps": "1.7.1",
     "react-native-safe-area-context": "4.6.3",
     "react-native-screens": "~3.22.0",
     "react-native-svg": "13.9.0",
     "react-native-web": "~0.19.6",
-    "updates": "^15.1.1",
-    "react-native-maps": "1.7.1"
+    "updates": "^15.1.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",