fixed modal scaling

src/components/Map/Panels/AddLandmarkPanel.tsx

@@ -8,7 +8,7 @@
 import { FontAwesome } from "@expo/vector-icons";
 import { ImageInfo } from "expo-image-picker/build/ImagePicker.types";
 import React, { memo, useEffect, useState } from "react";
-import { ActivityIndicator, Dimensions, Image, SafeAreaView, Text, TextInput, TouchableOpacity, View } from 'react-native';
+import { ActivityIndicator, Dimensions, Image, Keyboard, SafeAreaView, Text, TextInput, TouchableOpacity, View } from 'react-native';
 import { ScrollView } from "react-native-gesture-handler";
 import Modal from 'react-native-modal';
 import Picker from 'react-native-picker-select';
@@ -50,9 +50,43 @@ export interface AddLandmarkProps {
 const AddLandmarkPanel: React.FC<AddLandmarkProps> = ({newLandmark, setNewLandmark, setVisible, visible}) => {
     const [photos, setPhotos] = useState<LMPhoto[]>([])
     const [photoSourceMenuOpened, togglePhotoSourceMenu] = useState<boolean>(false)
+    const [keyboardOpened, setKeyboardOpened] = useState<boolean>(false);  
 
     const addLandmarkMutation = useAddLandmark()
 
+    useEffect(() => {
+        const keyboardDidShowListener = Keyboard.addListener(
+          'keyboardWillShow',
+          () => {
+            setKeyboardOpened(true); // or some other action
+          }
+        );
+        const keyboardDidHideListener = Keyboard.addListener(
+          'keyboardWillHide',
+          () => {
+            setKeyboardOpened(false); // or some other action
+          }
+        );
+    
+        return () => {
+          keyboardDidHideListener.remove();
+          keyboardDidShowListener.remove();
+        };
+      }, []);
+
+    /**
+     * Returns a height for the modal depending on if an image is maximzed, if the keyboard is opened, and if the current landmark has photos associated with it
+     */
+     const determineModalHeight = () => {
+        if (keyboardOpened) {
+            return Dimensions.get("window").height * .45
+        }
+        else if (photos?.length > 0) 
+            return Dimensions.get("window").height * .9
+        else
+            return Dimensions.get("window").height * .6
+    }
+
     useEffect(() => {
         /**
          * Resets the {@link addLandmarkAsync} mutation on successful add.
@@ -103,13 +137,12 @@ const AddLandmarkPanel: React.FC<AddLandmarkProps> = ({newLandmark, setNewLandma
         <Modal
             useNativeDriver={true}
             useNativeDriverForBackdrop={true}
-            
             testID="addLMModal"
-            avoidKeyboard={photos.length == 0}
+            avoidKeyboard={true}
             onBackdropPress={close}
             style={{justifyContent: "flex-end", height: '100%', margin: 0}}
             isVisible={visible} >
-            <SafeAreaView style={{backgroundColor: colors.red, height: photos.length>0 ? Dimensions.get('window').height * .8 : Dimensions.get('window').height * .6}}>
+            <SafeAreaView style={{backgroundColor: colors.red, height: determineModalHeight()}}>
                 {addLandmarkMutation.isIdle ?
                 <>
                     <View style={{
@@ -178,7 +211,7 @@ const AddLandmarkPanel: React.FC<AddLandmarkProps> = ({newLandmark, setNewLandma
                                 {photos.length == 0 ? <TouchableOpacity onPress={() => togglePhotoSourceMenu(true)}><Text style={{color: 'white'}}>Include photos</Text></TouchableOpacity> : null }
                             </View> : null}
                         </View> : null}
-                        {photos?.length ? 
+                        {photos?.length > 0 && !keyboardOpened ? 
                         <View>
                             <ScrollView style={{borderTopWidth: 1, borderColor: 'lightgray', paddingTop: 20, marginHorizontal: 20, flexDirection: 'row', marginBottom: 5, marginTop: 30}} horizontal={true}>
                                 {photos.map((photo, i) => {

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

@@ -334,7 +334,7 @@ const LandmarkDetails: React.FC<LandmarkDetailsProps> = ({authNavigation, landma
         else if (landmarkQuery?.data?.landmark?.photos?.length > 0) 
             return Dimensions.get("window").height * .9 
         else
-            return Dimensions.get("window").height * .7
+            return Dimensions.get("window").height * .6
     }
 
     return (