fixed formatting on landmark type picker

package-lock.json

@@ -66,6 +66,7 @@
         "react-native-gesture-handler": "~1.10.2",
         "react-native-get-random-values": "~1.7.0",
         "react-native-maps": "0.29.3",
+        "react-native-maps-directions": "^1.8.0",
         "react-native-material-menu": "^2.0.0",
         "react-native-modal": "^12.0.3",
         "react-native-multi-selectbox": "^1.5.0",
@@ -25074,6 +25075,20 @@
         "react-native-web": "^0.13"
       }
     },
+    "node_modules/react-native-maps-directions": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/react-native-maps-directions/-/react-native-maps-directions-1.8.0.tgz",
+      "integrity": "sha512-7KWfPrvPLU8VP2nEqsnrWlOuylidlRWWDdk3lqT5Nb1q87FeyzNgA7Ib7n6cZlQwH4usTRlJSnzNo/yQ3u4AZw==",
+      "dependencies": {
+        "lodash.isequal": "^4.5.0",
+        "prop-types": "^15.6.0"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*",
+        "react-native-maps": ">=0.12.1"
+      }
+    },
     "node_modules/react-native-material-menu": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/react-native-material-menu/-/react-native-material-menu-2.0.0.tgz",
@@ -51267,6 +51282,15 @@
         "@types/geojson": "^7946.0.7"
       }
     },
+    "react-native-maps-directions": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/react-native-maps-directions/-/react-native-maps-directions-1.8.0.tgz",
+      "integrity": "sha512-7KWfPrvPLU8VP2nEqsnrWlOuylidlRWWDdk3lqT5Nb1q87FeyzNgA7Ib7n6cZlQwH4usTRlJSnzNo/yQ3u4AZw==",
+      "requires": {
+        "lodash.isequal": "^4.5.0",
+        "prop-types": "^15.6.0"
+      }
+    },
     "react-native-material-menu": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/react-native-material-menu/-/react-native-material-menu-2.0.0.tgz",

src/components/LandmarkTypePicker.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import Picker, { Item } from 'react-native-picker-select'
+import { FontAwesome } from "@expo/vector-icons";
+
+interface LandmarkTypePickerProps {
+    onValueChange: (value: any, index: number) => void,
+    value?: any,
+    items: Item[],
+    placeholder?: {} | Item 
+}
+
+const LandmarkTypePicker: React.FC<LandmarkTypePickerProps> = ({items, value, onValueChange, placeholder}) => {
+    return (
+    <Picker
+        style={{
+            inputIOS: { color: 'white' },
+            inputAndroid: { color: 'white', alignItems: 'center', justifyContent: 'center' },
+            viewContainer: { marginVertical: 5, flex: 1}, 
+            iconContainer: { height: '100%', justifyContent: 'center' },
+            placeholder: { color: 'white' }
+        }}
+        textInputProps={{ placeholderTextColor: 'white', selectionColor: 'white' }}
+        Icon={() => <FontAwesome name="chevron-down" color='white' style={{alignSelf: 'center'}} size={20} />}
+        placeholder={placeholder}
+        value={value}
+        onValueChange={onValueChange}
+        useNativeAndroidPickerStyle={true}
+        items={items}
+    />)
+}
+
+export default React.memo(LandmarkTypePicker)

src/components/Map/Panels/AddLandmarkPanel.tsx

@@ -25,6 +25,7 @@ import IndoorFloor from "../IndoorFloor";
 import ViewShot, { captureRef, captureScreen } from "react-native-view-shot";
 
 import { useNavigationState } from "@react-navigation/native"
+import LandmarkTypePicker from "../../LandmarkTypePicker";
 
 
 /**
@@ -248,14 +249,7 @@ const AddLandmarkPanel: React.FC<AddLandmarkProps> = ({ newLandmark, setNewLandm
                                         {newLandmark?.description}
                                     </TextInput>
                                     <View style={{ flexDirection: 'row' }}>
-                                        <Picker
-                                            style={{
-                                                inputIOS: { color: 'white' },
-                                                inputAndroid: { color: 'white' },
-                                                viewContainer: { marginVertical: 5, flex: 1 }, placeholder: { color: 'white' }
-                                            }}
-                                            textInputProps={{ placeholderTextColor: 'white', selectionColor: 'white' }}
-                                            Icon={() => <FontAwesome name="chevron-down" color='white' size={20} />}
+                                        <LandmarkTypePicker 
                                             placeholder={{ label: "Select a landmark type...", value: 0 }}
                                             value={newLandmark?.landmark_type}
                                             onValueChange={(value) => {
@@ -266,13 +260,11 @@ const AddLandmarkPanel: React.FC<AddLandmarkProps> = ({ newLandmark, setNewLandm
                                                     setNewLandmark({ ...newLandmark, landmark_type: undefined, title: 'no title' })
                                                 }
                                             }}
-                                            useNativeAndroidPickerStyle={true}
                                             items={Object.keys(lmTypes)?.map(icon => {
                                                 return (
                                                     { label: lmTypes[parseInt(icon)]?.label.toUpperCase(), value: icon, key: icon }
                                                 )
-                                            })}
-                                        />
+                                            })}/>
 
                                         {newLandmark?.landmark_type ? <Image style={{ marginLeft: 20 }} source={lmTypes[newLandmark.landmark_type].image} />
                                             : null}

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

@@ -6,22 +6,20 @@
  */
 
 import { FontAwesome } from "@expo/vector-icons";
-import { ImageInfo } from "expo-image-picker/build/ImagePicker.types";
+import { useNavigationState } from "@react-navigation/native";
 import React, { MutableRefObject, useEffect, useState } from "react";
-import { ActivityIndicator, FlatList, Image, ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View } from "react-native";
+import { FlatList, Image, ScrollView, StyleSheet, Text, TextInput, View } from "react-native";
 import Picker from "react-native-picker-select";
 import { QueryStatus } from "react-query";
 import { LMComment } from "../../../../data/comments";
 import { Landmark, LMPhoto } from "../../../../data/landmarks";
 import { MainTabsNavigationProp } from "../../../../navigation/MainTabsNavigator";
-import { lmTypes as allLmTypes , lmTypesIndoor } from "../../../../utils/GlobalUtils";
-import { IconButton, PrimaryButton } from "../../../Buttons";
-import { PhotoPicker } from "../../../PhotoPicker";
+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 { useNavigationState } from "@react-navigation/native"
 
 
 interface DetailsBodyProps {
@@ -90,30 +88,21 @@ export const DetailsBody: React.FC<DetailsBodyProps> = (props) => {
      * Sub-component that renders picker for landmark types
      * @param 
      */
-    const LandmarkTypePicker: React.FC = () => {
+    const LandmarkTypePickerContainer: React.FC = () => {
         return (
         <View style={{flexDirection: 'row', marginBottom: 20, justifyContent: "space-between"}}>
             {props.updatedLandmark?.landmark_type ? 
             <>
-                <Picker
-                    style={{
-                        inputIOS: {flexDirection: 'row', color: 'white', textAlignVertical: 'center', },
-                        inputAndroid: {color: 'white', textAlignVertical: 'center'},
-                        iconContainer: {flex: 1, justifyContent: 'center', height: '100%'},
-                        inputIOSContainer: {},
-                        viewContainer: { padding: 5, elevation: 1, flex: 1, marginTop: 5}, 
-                        placeholder: {color: 'white'}}}
+                <LandmarkTypePicker 
                     placeholder={{}}
-                    Icon={() => <FontAwesome name="chevron-down" color='white' size={20} />}
-                    value={props.updatedLandmark?.landmark_type}
+                    value={props.updatedLandmark?.landmark_type} 
                     onValueChange={(value) => {
                         props.setUpdatedLandmark({...props.updatedLandmark, landmark_type: value, title: lmTypes[value].label})
-                    }}
-                    useNativeAndroidPickerStyle={true}
+                    }}  
                     items={Object.keys(lmTypes)?.filter(icon => parseInt(icon) != props.landmark?.landmark_type).map(icon => {
                         return (
                             {label: lmTypes[parseInt(icon)].label.toUpperCase(), value: icon, key: icon}
-                        )})} />
+                        )})}/>
                 {props.updatedLandmark ? <Image style={{marginLeft: 20}} source={lmTypes[props.updatedLandmark?.landmark_type].image}/> : null}
             </>
             : null}
@@ -143,7 +132,7 @@ export const DetailsBody: React.FC<DetailsBodyProps> = (props) => {
         <ScrollView nestedScrollEnabled={true} contentContainerStyle={{justifyContent: 'space-between'}} style={{flex: 1, marginHorizontal: 20}}>
             {props.editingEnabled ?
             <>
-                <LandmarkTypePicker />
+                <LandmarkTypePickerContainer />
                 <Separator style={{marginBottom: 20, opacity: .5}} color="lightgray" />
                 <Text style={{color: 'white', marginBottom: 10}}>Description</Text>
                 {/* {console.log("*DETAILS BODY: currentRotue is " + currentRoute)} */}