Added map preview to start studying page

src/components/Api/Api.tsx

@@ -30,6 +30,9 @@ const instance = axios.create({
 
 console.log(backendURL);
 
+// 3rd Party APIs
+export const urlProvider =
+  "https://tile.thunderforest.com/atlas/{z}/{x}/{y}.png?apikey=0f5cb5930d7642a8a921daea650754d9";
 // App APIs
 
 // Token Handling

src/routes/Home/Home.tsx

@@ -6,13 +6,10 @@ import MapView, { Callout, Marker, UrlTile } from "react-native-maps";
 import * as Location from "expo-location";
 import GetDistance from "../../components/GetDistance/GetDistance";
 import Button from "../../components/Button/Button";
-import { PostStudentStatus } from "../../components/Api/Api";
+import { RootDrawerParamList } from "../../interfaces/Interfaces";
-import {
-  RootDrawerParamList,
-  StudentStatusParams,
-} from "../../interfaces/Interfaces";
 import { LocationType } from "../../interfaces/Interfaces";
 import { useNavigation } from "@react-navigation/native";
+import { urlProvider } from "../../components/Api/Api";
 
 export default function Home() {
   const navigation = useNavigation<RootDrawerParamList>();
@@ -21,8 +18,7 @@ export default function Home() {
   const [feedback, setFeedback] = useState(
     "To continue, please allow Stud-E permission to location services"
   );
-  const urlProvider =
+
-    "https://tile.thunderforest.com/atlas/{z}/{x}/{y}.png?apikey=0f5cb5930d7642a8a921daea650754d9";
   const ustpCoords = {
     latitude: 8.4857,
     longitude: 124.6565,

src/routes/StartStudying/StartStudying.tsx

@@ -1,20 +1,16 @@
 import * as React from "react";
-import styles from "../../styles";
+import styles, { Viewport } from "../../styles";
 import { View, Text } from "react-native";
 import { useState } from "react";
-import {
+import { UserInfoParams, OptionType } from "../../interfaces/Interfaces";
-  UserInfoParams,
-  Subject,
-  OptionType,
-} from "../../interfaces/Interfaces";
 import Button from "../../components/Button/Button";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { UserInfo } from "../../components/Api/Api";
 import { colors } from "../../styles";
 import DropDownPicker from "react-native-dropdown-picker";
 import AnimatedContainerNoScroll from "../../components/AnimatedContainer/AnimatedContainerNoScroll";
-import { useSelector } from "react-redux";
+import { urlProvider } from "../../components/Api/Api";
-import { RootState } from "../../features/redux/Store/Store";
+import MapView, { UrlTile, Marker } from "react-native-maps";
 
 export default function StartStudying({ route }: any) {
   const { location } = route.params;
@@ -43,6 +39,57 @@ export default function StartStudying({ route }: any) {
     return (
       <View style={styles.background}>
         <AnimatedContainerNoScroll>
+          <View style={{ zIndex: -1 }}>
+            <View style={styles.padding} />
+            <MapView
+              style={{
+                height: Viewport.height * 0.4,
+                width: Viewport.width * 0.8,
+                alignSelf: "center",
+              }}
+              customMapStyle={[
+                {
+                  featureType: "poi",
+                  stylers: [
+                    {
+                      visibility: "off",
+                    },
+                  ],
+                },
+              ]}
+              mapType="none"
+              scrollEnabled={false}
+              zoomEnabled={false}
+              toolbarEnabled={false}
+              rotateEnabled={false}
+              minZoomLevel={18}
+              initialRegion={{
+                latitude: location.coords.latitude,
+                longitude: location.coords.longitude,
+                latitudeDelta: 0.0922,
+                longitudeDelta: 0.0421,
+              }}
+              loadingBackgroundColor={colors.secondary_2}
+            >
+              <UrlTile
+                urlTemplate={urlProvider}
+                shouldReplaceMapContent={true}
+                maximumZ={19}
+                flipY={false}
+                zIndex={1}
+              />
+              <Marker
+                coordinate={{
+                  latitude: location.coords.latitude,
+                  longitude: location.coords.longitude,
+                }}
+                pinColor={colors.primary_1}
+              />
+            </MapView>
+            <View style={styles.padding} />
+
+            <Text style={styles.text_white_small}>{feedback}</Text>
+          </View>
           <View style={styles.flex_row}>
             <View style={{ flex: 1 }}>
               <Text style={styles.text_white_small_bold}>Start Studying</Text>
@@ -80,17 +127,10 @@ export default function StartStudying({ route }: any) {
               />
             </View>
           </View>
-          <View style={{ zIndex: -1 }}>
+          <View style={styles.padding} />
-            <View style={styles.padding} />
+          <Button onPress={() => {}}>
-            <Text style={styles.text_white_small}>
+            <Text style={styles.text_white_small}>Start Studying</Text>
-              {location.coords.longitude + "\n" + location.coords.latitude}
+          </Button>
-            </Text>
-            <Button onPress={() => {}}>
-              <Text style={styles.text_white_small}>Start Studying</Text>
-            </Button>
-            <View style={styles.padding} />
-            <Text style={styles.text_white_small}>{feedback}</Text>
-          </View>
         </AnimatedContainerNoScroll>
       </View>
     );