Use safe area insets as offset value

CHANGELOG.md

@@ -1,5 +1,7 @@
 [unreleased]
 
+* Fixes empty space between chat's input and a soft keyboard on iOS devices.
+
 * Changed registration process - user connects to the libp2p network directly instead of using registrar. Invitation link format changed. User csr is now saved to database.
 
 * Fixed android stucking on username registration screen introduced in previous alpha.

packages/mobile/src/components/Chat/Chat.component.tsx

@@ -1,5 +1,6 @@
 import React, { FC, useState, useEffect, useRef } from 'react'
 import { Keyboard, View, FlatList, TextInput, KeyboardAvoidingView, Platform } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Appbar } from '../../components/Appbar/Appbar.component'
 import { ImagePreviewModal } from '../../components/ImagePreview/ImagePreview.component'
 import { Spinner } from '../Spinner/Spinner.component'
@@ -43,7 +44,10 @@ export const Chat: FC<ChatProps & FileActionsProps> = ({
 
   const messageInputRef = useRef<null | TextInput>(null)
 
+  const insets = useSafeAreaInsets()
+
   const defaultPadding = 20
+
   const areFilesUploaded = uploadedFiles && Object.keys(uploadedFiles).length > 0
 
   useEffect(() => {
@@ -125,7 +129,7 @@ export const Chat: FC<ChatProps & FileActionsProps> = ({
       <Appbar title={`#${channel?.name}`} back={handleBackButton} contextMenu={contextMenu} />
       <KeyboardAvoidingView
         behavior={Platform.select({ ios: 'padding', android: undefined })}
-        keyboardVerticalOffset={Platform.select({ ios: 60, android: 0 })}
+        keyboardVerticalOffset={Platform.select({ ios: insets.bottom, android: 0 })}
         enabled={Platform.select({ ios: true, android: false })}
         style={{
           flex: 1,

packages/mobile/src/setupTests.tsx

@@ -62,6 +62,14 @@ jest.mock('socket.io-client', () => ({
 // could not be found. Verify that a module by this name is registered in the native binary."
 jest.mock('react-native-document-picker', () => { })
 
+jest.mock('react-native-safe-area-context', () => ({
+  useSafeAreaInsets: () => {
+    return {
+      bottom: 0
+    }
+  }
+}))
+
 export const ioMock = io as jest.Mock
 
 jest.resetAllMocks()