ADD: useKeyboard

hooks/useKeyboard.ts

@@ -0,0 +1,54 @@
+import { useState, useEffect } from 'react';
+import { Keyboard, KeyboardEvent, Platform } from 'react-native';
+
+interface KeyboardInfo {
+  isVisible: boolean;
+  height: number;
+}
+
+interface UseKeyboardProps {
+  onKeyboardDidShow?: () => void;
+  onKeyboardDidHide?: () => void;
+}
+
+export const useKeyboard = ({ onKeyboardDidShow, onKeyboardDidHide }: UseKeyboardProps = {}): KeyboardInfo => {
+  const [keyboardInfo, setKeyboardInfo] = useState<KeyboardInfo>({
+    isVisible: false,
+    height: 0,
+  });
+
+  useEffect(() => {
+    const handleKeyboardDidShow = (event: KeyboardEvent) => {
+      setKeyboardInfo({
+        isVisible: true,
+        height: event.endCoordinates.height,
+      });
+      if (onKeyboardDidShow) {
+        onKeyboardDidShow();
+      }
+    };
+
+    const handleKeyboardDidHide = () => {
+      setKeyboardInfo({
+        isVisible: false,
+        height: 0,
+      });
+      if (onKeyboardDidHide) {
+        onKeyboardDidHide();
+      }
+    };
+
+    const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+    const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+
+    const showSubscription = Keyboard.addListener(showEvent, handleKeyboardDidShow);
+    const hideSubscription = Keyboard.addListener(hideEvent, handleKeyboardDidHide);
+
+    return () => {
+      showSubscription.remove();
+      hideSubscription.remove();
+    };
+  }, [onKeyboardDidShow, onKeyboardDidHide]);
+
+  return keyboardInfo;
+};

screen/send/SendDetails.tsx

@@ -54,6 +54,7 @@ import { ContactList } from '../../class/contact-list';
 import { useStorage } from '../../hooks/context/useStorage';
 import { Action } from '../../components/types';
 import SelectFeeModal from '../../components/SelectFeeModal';
+import { useKeyboard } from '../../hooks/useKeyboard';
 
 interface IPaymentDestinations {
   address: string; // btc address or payment code
@@ -134,25 +135,16 @@ const SendDetails = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [colors, wallet, isTransactionReplaceable, balance, addresses, isEditable, isLoading]);
 
-  // keyboad effects
-  useEffect(() => {
-    const _keyboardDidShow = () => {
+  useKeyboard({
+    onKeyboardDidShow: () => {
       setWalletSelectionOrCoinsSelectedHidden(true);
       setIsAmountToolbarVisibleForAndroid(true);
-    };
-
-    const _keyboardDidHide = () => {
+    },
+    onKeyboardDidHide: () => {
       setWalletSelectionOrCoinsSelectedHidden(false);
       setIsAmountToolbarVisibleForAndroid(false);
-    };
-
-    const showSubscription = Keyboard.addListener(Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow', _keyboardDidShow);
-    const hideSubscription = Keyboard.addListener(Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide', _keyboardDidHide);
-    return () => {
-      showSubscription.remove();
-      hideSubscription.remove();
-    };
-  }, []);
+    },
+  });
 
   useEffect(() => {
     // decode route params