diff --git a/src/screens/DirectMessagesScreen.tsx b/src/screens/DirectMessagesScreen.tsx index 34be856f..037b849a 100644 --- a/src/screens/DirectMessagesScreen.tsx +++ b/src/screens/DirectMessagesScreen.tsx @@ -23,6 +23,7 @@ import { ScrollView, Image, Dimensions, + Keyboard, } from 'react-native'; import { useInfinitePrivatePosts, @@ -92,6 +93,14 @@ export const DirectMessagesScreen = ({ } )[] >([]); + const [isKeyboardOpen, setIsKeyboardOpen] = React.useState( + Keyboard.isVisible(), + ); + + useEffect(() => { + Keyboard.addListener('keyboardWillShow', () => setIsKeyboardOpen(true)); + Keyboard.addListener('keyboardWillHide', () => setIsKeyboardOpen(false)); + }, []); useEffect(() => { const conversation = conversations?.pages @@ -123,7 +132,9 @@ export const DirectMessagesScreen = ({ ); const onSend = useCallback( - (newMessages: IMessage[] = []) => { + async (newMessages: IMessage[] = []) => { + Keyboard.dismiss(); + // Shouldn't happen but this makes sure we don't send empty attachments const removeLoadingImages = ( item: @@ -134,36 +145,38 @@ export const DirectMessagesScreen = ({ ): item is CreateAttachmentResponse => !item.loading; // In practice their won't be more than one message at a time - newMessages.map(async (m) => { - const isLastMessage = newMessages.indexOf(m) === newMessages.length - 1; - - await mutateAsync({ - userIds: users.map((user) => user.id), - post: { - message: m.text, - ...(isLastMessage - ? { - attachmentsV2: pendingImages - .filter(removeLoadingImages) - .map((i) => ({ - ...i.attachment, - url: i.uploadConfig.fileLocation.permanentUrl, - })), - } - : {}), - }, - }); - - if (isLastMessage) { - setPendingImages([]); - } - }); + await Promise.all( + newMessages.map(async (m) => { + const isLastMessage = + newMessages.indexOf(m) === newMessages.length - 1; + + await mutateAsync({ + userIds: users.map((user) => user.id), + post: { + message: m.text, + ...(isLastMessage + ? { + attachmentsV2: pendingImages + .filter(removeLoadingImages) + .map((i) => ({ + ...i.attachment, + url: i.uploadConfig.fileLocation.permanentUrl, + })), + } + : {}), + }, + }); + }), + ); + setPendingImages([]); }, [mutateAsync, users, pendingImages], ); const canUploadImages = !!launchImagePicker; const addImageAttachment = useCallback(async () => { + Keyboard.dismiss(); + const pickerResult = await launchImagePicker({ mediaType: 'photo', selectionLimit: MAX_IMAGE_UPLOADS_PER_MESSAGE - pendingImages.length, @@ -243,7 +256,10 @@ export const DirectMessagesScreen = ({ _id: userData.id, }} bottomOffset={Platform.select({ ios: tabsHeight })} - messagesContainerStyle={styles.messagesContainerStyle} + messagesContainerStyle={[ + styles.messagesContainerStyle, + isKeyboardOpen && { paddingBottom: 0 }, + ]} renderBubble={(props) => { return ( ); }} @@ -351,7 +371,8 @@ export const DirectMessagesScreen = ({ } renderFooter={() => // Add a footer to the bottom of the screen to account for the image preview - !!pendingImages.length && ( + !!pendingImages.length && + !isKeyboardOpen && ( ) } - {...({ - // accessoryStyle overrides are not documented but are supported - accessoryStyle: { - height: styles.pendingImagesContainer?.height, - ...styles.accessoryContainer, - }, - } as any)} renderAccessory={ pendingImages.length ? () => (