Fix keyboard overlapping attachment bottom sheet issue

src/components/AttachmentFields/index.tsx

@@ -7,7 +7,7 @@ import {
   MultiSlotInput,
   useTheme
 } from '@tetherto/pearpass-lib-ui-kit'
-import { Keyboard, View } from 'react-native'
+import { View } from 'react-native'
 import {
   Add,
   TrashOutlined,
@@ -16,8 +16,7 @@ import {
 
 import { BottomSheetAttachmentActionsContent } from '../../containers/BottomSheetAttachmentActionsContent'
 import { BottomSheetUploadFileContent } from '../../containers/BottomSheetUploadFileContent'
-
-const KEYBOARD_DISMISS_DELAY_MS = 250
+import { openAfterKeyboardDismiss } from '../../utils/openAfterKeyboardDismiss'
 
 type AttachmentLike = {
   id?: string | number
@@ -113,8 +112,7 @@ export const AttachmentFields = <T extends AttachmentLike>({
   }, [])
 
   const openUploadSheet = useCallback((item: AttachmentFieldItem<T>) => {
-    Keyboard.dismiss()
-    setTimeout(() => setActiveUploadTarget(item), KEYBOARD_DISMISS_DELAY_MS)
+    openAfterKeyboardDismiss(() => setActiveUploadTarget(item))
   }, [])
 
   const handleUploadSelect = useCallback(

src/components/FolderSelectField/index.tsx

@@ -12,12 +12,9 @@ import {
   Close,
   KeyboardArrowBottom
 } from '@tetherto/pearpass-lib-ui-kit/icons'
-import { Keyboard } from 'react-native'
-
+import { openAfterKeyboardDismiss } from '../../utils/openAfterKeyboardDismiss'
 import { BottomSheetFolderSelectorContent } from '../../containers/BottomSheetFolderSelectorContent'
 
-const KEYBOARD_DISMISS_DELAY_MS = 250
-
 type Props = {
   value?: string
   onChange: (folderName: string) => void
@@ -37,8 +34,7 @@ export const FolderSelectField = ({
 
   const handleOpenChange = (next: boolean) => {
     if (next) {
-      Keyboard.dismiss()
-      setTimeout(() => setOpen(true), KEYBOARD_DISMISS_DELAY_MS)
+      openAfterKeyboardDismiss(() => setOpen(true))
       return
     }
     setOpen(false)

src/utils/openAfterKeyboardDismiss.ts

@@ -0,0 +1,23 @@
+import { Keyboard } from 'react-native'
+
+const FALLBACK_DELAY_MS = 350
+
+/**
+ * Dismisses the keyboard and invokes callback only after the keyboard is fully
+ * hidden. Falls back to a timeout when the keyboard is not currently visible.
+ */
+export const openAfterKeyboardDismiss = (callback: () => void): void => {
+  let called = false
+
+  const invoke = () => {
+    if (called) return
+    called = true
+    subscription.remove()
+    clearTimeout(fallback)
+    callback()
+  }
+
+  const subscription = Keyboard.addListener('keyboardDidHide', invoke)
+  Keyboard.dismiss()
+  const fallback = setTimeout(invoke, FALLBACK_DELAY_MS)
+}