feat: add custom callout in maps view

geeekgod · Apr 2, 2023 · 71ccfc8 · 71ccfc8
1 parent e3c9605
commit 71ccfc8
Showing 1 changed file with 60 additions and 51 deletions.
diff --git a/app/screens/MapRequestsView/index.jsx b/app/screens/MapRequestsView/index.jsx
@@ -3,22 +3,37 @@ import { StyleSheet, TouchableOpacity, View } from "react-native";
 import { heightScreen, widthScreen } from "../../utils/layout";
 import {
   Box,
+  Text,
   Button,
   CloseIcon,
   HStack,
   Divider,
   Icon,
   IconButton,
-  Text,
   VStack,
   FlatList,
 } from "native-base";
 import { DataContext } from "../../context/DataContext";
 import * as Linking from "expo-linking";
 import { AuthContext } from "../../context/AuthContext";
-import MapView, { Marker } from "react-native-maps";
+import MapView, { Marker, Callout } from "react-native-maps";
 import { MaterialIcons } from "@expo/vector-icons";
 
+const RequestsCallOut = (props) => {
+  const { name, address, email, phone, city, pin, bloodGroup, location } = props.data;
+  return (
+    <Box w='300' h='200' p='2'>
+      <Text fontSize="xl">{name}</Text>
+      <Text>{email}</Text>
+      <Text>{phone}</Text>
+      <Text>{bloodGroup}</Text>
+      <Text>{address}</Text>
+      <Text>{city}</Text>
+      <Text>{pin}</Text>
+    </Box>
+  )
+};
+
 const MapRequestsView = () => {
   const {
     requests,
@@ -58,23 +73,13 @@ const MapRequestsView = () => {
     await loadRequest();
   };
 
-  const updateCurrentLocation = (e) => {
-    setLocationState({ ...locationState, latitude: e.nativeEvent.coordinate.latitude, longitude: e.nativeEvent.coordinate.longitude })
-  }
 
   const fetchNearByRequests = () => {
     setTimeout(async () => {
       await getNearByRequests(accessToken);
     }, 1000)
   }
 
-  useEffect(() => {
-    if (location && location.coords && location.coords.latitude != locationState.latitude && location.coords.longitude != locationState.longitude) {
-      setLocation({ coords: { latitude: locationState.latitude, longitude: locationState.longitude } })
-      fetchNearByRequests();
-    }
-  }, [locationState]);
-
   useEffect(() => {
     if (location && location.coords && location.coords.latitude != locationState.latitude && location.coords.longitude != locationState.longitude) {
       setLocationState({ ...locationState, latitude: location.coords.latitude, longitude: location.coords.longitude });
@@ -84,45 +89,49 @@ const MapRequestsView = () => {
 
   return (
     <View style={styles.container}>
-        <MapView.Animated
-          region={locationState}
-          style={styles.map}
-          ref={mapRef}
-        >
-          {locationState.latitude && locationState.longitude && (
-            <Marker coordinate={locationState}
-              title={"Your Location"} image={require('../../assets/user_marker.png')}
-              draggable
-              onDragEnd={(e) => updateCurrentLocation(e)}
-            />)}
-          {nearByRequests && nearByRequests.map((request, index) => {
-            return (
-              <Marker
-                key={index}
-                coordinate={{
-                  latitude: request.location[1],
-                  longitude: request.location[0],
-                }}
-                title={`Requests from ${request.name} for ${request.bloodGroup}`}
-                image={require('../../assets/requests_marker.png')}
-              // description={request.description}
-              />
-            );
-          })}
-        </MapView.Animated>
-        <IconButton size={"lg"} variant="solid"
-          position="absolute"
-          bottom={65}
-          right={5}
-          rounded="full"
-          _icon={{
-            as: MaterialIcons,
-            name: "location-searching"
-          }}
-          zIndex={10}
-          onPress={getLocation}
-        // onPress={() => console.log("Pressed")}
-        />
+      <MapView.Animated
+        region={locationState}
+        style={styles.map}
+        ref={mapRef}
+      >
+        {locationState.latitude && locationState.longitude && (
+          <Marker coordinate={locationState}
+            title={"Your Location"} image={require('../../assets/user_marker.png')}
+          />)}
+        {nearByRequests && nearByRequests.map((request, index) => {
+          return (
+            <Marker
+              key={index}
+              coordinate={{
+                latitude: request.location[1],
+                longitude: request.location[0],
+              }}
+              title={`Requests from ${request.name} for ${request.bloodGroup}`}
+              image={require('../../assets/requests_marker.png')}
+            >
+              <Callout onPress={() =>
+                Linking.openURL(`https://maps.google.com/maps?q=${request.location[1]},${request.location[0]}`)
+              }
+                style={{ width: 300, height: 200, borderRadius: 20 }}>
+                <RequestsCallOut data={request} />
+              </Callout>
+            </Marker>
+          );
+        })}
+      </MapView.Animated>
+      <IconButton size={"lg"} variant="solid"
+        position="absolute"
+        bottom={65}
+        right={5}
+        rounded="full"
+        _icon={{
+          as: MaterialIcons,
+          name: "location-searching"
+        }}
+        zIndex={10}
+        onPress={getLocation}
+      // onPress={() => console.log("Pressed")}
+      />
     </View>
   );
 };