add map to edit landmark and update location

src/components/Map/Panels/LandmarkDetailsPanel/DetailsBody.tsx

@@ -8,17 +8,21 @@
 import { FontAwesome } from "@expo/vector-icons";
 import { useNavigationState } from "@react-navigation/native";
 import React, { MutableRefObject, useEffect, useRef, useState } from "react";
-import { FlatList, Image, ScrollView, StyleSheet, Text, TextInput, View } from "react-native";
+import { FlatList, Dimensions, Image, ScrollView, StyleSheet, Text, TextInput, View } from "react-native";
+import { TouchableOpacity } from "react-native-gesture-handler";
 import Picker from "react-native-picker-select";
 import { QueryStatus } from "react-query";
 import { LMComment } from "../../../../data/comments";
 import { Landmark, LMPhoto } from "../../../../data/landmarks";
+import MapView, {Marker} from "react-native-maps";
+import { usePermissions } from "../../../../data/PermissionsContext";
 import { MainTabsNavigationProp } from "../../../../navigation/MainTabsNavigator";
 import { lmTypes as allLmTypes, lmTypesIndoor } from "../../../../utils/GlobalUtils";
 import LandmarkTypePicker from "../../../LandmarkTypePicker";
 import { Separator } from "../../../Separator";
 import { CommentsContainer } from "./CommentsContainer";
 import { LandmarkPhotos } from "./LandmarkPhotos";
+import { useOutdoorMapState } from "../../MainMapComponent/useMapState";
 
 
 
@@ -58,6 +62,8 @@ interface DetailsBodyProps {
  * Component that renders the body of the Landmark details panel
 */
 export const DetailsBody: React.FC<DetailsBodyProps> = (props) => {
+    const {locationPermissionsGranted, checkLocationPermissions, voicePermissionsGranted, checkVoicePermissions} = usePermissions();
+    const mapState = useOutdoorMapState()
 
     const navigationState = useNavigationState(state => state)
     const [currentRoute, setCurrentRoute] = useState<string>()
@@ -133,6 +139,24 @@ export const DetailsBody: React.FC<DetailsBodyProps> = (props) => {
         <ScrollView ref={mainScrollRef} nestedScrollEnabled={true} contentContainerStyle={{justifyContent: 'space-between'}} style={{flex: 1, marginHorizontal: 20}}>
             {props.editingEnabled ?
             <>
+                <Text style={{color: 'white', marginBottom: 10}}>Location</Text>
+                <MapView
+                    toolbarEnabled={false}
+                    onPress={(e) => 
+                        props.setUpdatedLandmark({...props.updatedLandmark, longitude: e.nativeEvent.coordinate.longitude, latitude: e.nativeEvent.coordinate.latitude})
+                    }
+                    testID="mapViewLocationEdit"
+                    style={{ width: '100%', height: Dimensions.get("window").height * .4, marginBottom: 20}}
+                    initialRegion={{latitude: props.landmark?.latitude, longitude: props.landmark?.longitude, latitudeDelta: 0.01, longitudeDelta: 0.01}}
+                    showsUserLocation={locationPermissionsGranted}
+                    showsMyLocationButton={false}
+                    >
+
+                    <Marker
+                        coordinate={{ latitude: props.updatedLandmark?.latitude as number, longitude: props.updatedLandmark?.longitude as number }} >
+                        {props.updatedLandmark?.landmark_type ? <Image style={{ height: 35, width: 25 }} source={lmTypes[props.updatedLandmark?.landmark_type]?.image} /> : null}
+                    </Marker>
+                </MapView>
                 <LandmarkTypePickerContainer />
                 <Separator style={{marginBottom: 20, opacity: .5}} color="lightgray" />
                 <Text style={{color: 'white', marginBottom: 10}}>Description</Text>
@@ -143,6 +167,7 @@ export const DetailsBody: React.FC<DetailsBodyProps> = (props) => {
                         onChangeText={text => props.setUpdatedLandmark({...props.updatedLandmark, description: text})} 
                         value={props.updatedLandmark?.description}/>
                 </ScrollView>
+
             </>: <EditingDisabledUpperView />}
             {!props.editingEnabled ?
             <CommentsContainer

src/components/Map/Panels/LandmarkDetailsPanel/LandmarkDetails.tsx

@@ -331,7 +331,7 @@ const LandmarkDetails: React.FC<LandmarkDetailsProps> = ({authNavigation, landma
         if (selectedImage > -1) 
             return Dimensions.get("window").height 
         else if (keyboardOpened || editingEnabled || (!landmarkOwnedByUser(landmarkQuery?.data?.landmark) && landmarkQuery?.data?.landmark?.photos?.length == 0)) {
-            return Dimensions.get("window").height * .4
+            return Dimensions.get("window").height * .8
         }
         else if (landmarkQuery?.data?.landmark?.photos?.length > 0) 
             return Dimensions.get("window").height * .9