fix: adjust keyboard behavior for iOS using KeyboardAvoidingView

components/DismissableKeyboardView.tsx

@@ -0,0 +1,17 @@
+import { Platform, KeyboardAvoidingView, Keyboard, TouchableWithoutFeedback } from "react-native";
+
+function DismissableKeyboardView({ children }: { children?: React.ReactNode | undefined }) {
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      keyboardVerticalOffset={Platform.OS === 'ios' ? 100 : 0}
+      className="flex-1"
+    >
+      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+        {children}
+      </TouchableWithoutFeedback>
+    </KeyboardAvoidingView>
+  );
+}
+
+export default DismissableKeyboardView;

pages/receive/Receive.tsx

@@ -1,5 +1,5 @@
 import { Link, router } from "expo-router";
-import { Keyboard, Share, TouchableWithoutFeedback, View } from "react-native";
+import { Share, View } from "react-native";
 import { Button } from "~/components/ui/button";
 import * as Clipboard from "expo-clipboard";
 import React from "react";
@@ -15,6 +15,7 @@ import { DualCurrencyInput } from "~/components/DualCurrencyInput";
 import { useGetFiatAmount } from "~/hooks/useGetFiatAmount";
 import QRCode from "~/components/QRCode";
 import Screen from "~/components/Screen";
+import DismissableKeyboardView from "~/components/DismissableKeyboardView";
 
 export function Receive() {
   const getFiatAmount = useGetFiatAmount();
@@ -271,11 +272,7 @@ export function Receive() {
       )}
       {/* TODO: move to one place - this is all copied from LNURL-Pay */}
       {!invoice && enterCustomAmount && (
-        <TouchableWithoutFeedback
-          onPress={() => {
-            Keyboard.dismiss();
-          }}
-        >
+        <DismissableKeyboardView>
           <View className="flex-1 flex flex-col">
             <View className="flex-1 h-full flex flex-col justify-center gap-5 p-3">
               <DualCurrencyInput
@@ -308,7 +305,7 @@ export function Receive() {
               </Button>
             </View>
           </View>
-        </TouchableWithoutFeedback>
+        </DismissableKeyboardView>
       )}
     </>
   );

pages/send/LNURLPay.tsx

@@ -1,14 +1,15 @@
 import Screen from "~/components/Screen";
 import { router, useLocalSearchParams } from "expo-router";
 import React from "react";
-import { Keyboard, TouchableWithoutFeedback, View } from "react-native";
+import { View } from "react-native";
 import { Button } from "~/components/ui/button";
 import { Text } from "~/components/ui/text";
 import { LNURLPayServiceResponse, lnurl } from "~/lib/lnurl";
 import { Input } from "~/components/ui/input";
 import { errorToast } from "~/lib/errorToast";
 import Loading from "~/components/Loading";
 import { DualCurrencyInput } from "~/components/DualCurrencyInput";
+import DismissableKeyboardView from "~/components/DismissableKeyboardView";
 
 export function LNURLPay() {
   const { lnurlDetailsJSON, originalText } =
@@ -46,11 +47,7 @@ export function LNURLPay() {
   return (
     <>
       <Screen title="Send" />
-      <TouchableWithoutFeedback
-        onPress={() => {
-          Keyboard.dismiss();
-        }}
-      >
+      <DismissableKeyboardView>
         <View className="flex-1 flex flex-col">
           <View className="flex-1 justify-center items-center p-6 gap-6">
             <DualCurrencyInput
@@ -91,7 +88,7 @@ export function LNURLPay() {
             </Button>
           </View>
         </View>
-      </TouchableWithoutFeedback>
+      </DismissableKeyboardView>
     </>
   );
 }

pages/send/Send.tsx

@@ -1,6 +1,6 @@
 import Screen from "~/components/Screen";
 import React, { useEffect } from "react";
-import { Keyboard, TouchableWithoutFeedback, View } from "react-native";
+import { View } from "react-native";
 import * as Clipboard from "expo-clipboard";
 import { lnurl } from "lib/lnurl";
 import { Button } from "~/components/ui/button";
@@ -16,6 +16,7 @@ import { errorToast } from "~/lib/errorToast";
 import { Invoice } from "@getalby/lightning-tools";
 import QRCodeScanner from "~/components/QRCodeScanner";
 import Loading from "~/components/Loading";
+import DismissableKeyboardView from "~/components/DismissableKeyboardView";
 
 export function Send() {
   const { url } = useLocalSearchParams<{ url: string }>();
@@ -151,11 +152,7 @@ export function Send() {
             </>
           )}
           {keyboardOpen && (
-            <TouchableWithoutFeedback
-              onPress={() => {
-                Keyboard.dismiss();
-              }}
-            >
+            <DismissableKeyboardView>
               <View className="flex-1 h-full flex flex-col gap-5 p-6">
                 <View className="flex-1 flex items-center justify-center">
                   <Text className="text-muted-foreground text-center">
@@ -177,7 +174,7 @@ export function Send() {
                   <Text>Next</Text>
                 </Button>
               </View>
-            </TouchableWithoutFeedback>
+            </DismissableKeyboardView>
           )}
         </>
       )}

pages/settings/address-book/NewAddressBookEntry.tsx

@@ -1,23 +1,20 @@
 import { router } from "expo-router";
 import React from "react";
-import { Keyboard, TouchableWithoutFeedback, View } from "react-native";
+import { View } from "react-native";
 import Toast from "react-native-toast-message";
 import { Button } from "~/components/ui/button";
 import { Input } from "~/components/ui/input";
 import { Label } from "~/components/ui/label";
 import { Text } from "~/components/ui/text";
 import { useAppStore } from "~/lib/state/appStore";
 import Screen from "~/components/Screen";
+import DismissableKeyboardView from "~/components/DismissableKeyboardView";
 
 export function NewAddressBookEntry() {
   const [name, setName] = React.useState("");
   const [lightningAddress, setLightningAddress] = React.useState("");
   return (
-    <TouchableWithoutFeedback
-      onPress={() => {
-        Keyboard.dismiss();
-      }}
-    >
+    <DismissableKeyboardView>
       <View className="flex-1 flex flex-col">
         <View className="flex-1 flex flex-col p-3 gap-3">
           <Screen
@@ -72,6 +69,6 @@ export function NewAddressBookEntry() {
           </Button>
         </View>
       </View>
-    </TouchableWithoutFeedback>
+    </DismissableKeyboardView>
   );
 }

pages/settings/wallets/LightningAddress.tsx

@@ -1,12 +1,13 @@
 import { router } from "expo-router";
 import React from "react";
-import { Keyboard, TouchableWithoutFeedback, View } from "react-native";
+import { View } from "react-native";
 import Toast from "react-native-toast-message";
 import { Button } from "~/components/ui/button";
 import { Input } from "~/components/ui/input";
 import { Text } from "~/components/ui/text";
 import { useAppStore } from "~/lib/state/appStore";
 import Screen from "~/components/Screen";
+import DismissableKeyboardView from "~/components/DismissableKeyboardView";
 
 export function LightningAddress() {
   const selectedWalletId = useAppStore((store) => store.selectedWalletId);
@@ -16,11 +17,7 @@ export function LightningAddress() {
     setLightningAddress(wallets[selectedWalletId].lightningAddress || "");
   }, [wallets, selectedWalletId]);
   return (
-    <TouchableWithoutFeedback
-      onPress={() => {
-        Keyboard.dismiss();
-      }}
-    >
+    <DismissableKeyboardView>
       <View className="flex-1 flex flex-col">
         <View className="flex-1 flex flex-col p-3 gap-3">
           <Screen
@@ -57,6 +54,6 @@ export function LightningAddress() {
           </Button>
         </View>
       </View>
-    </TouchableWithoutFeedback>
+    </DismissableKeyboardView>
   );
 }

pages/settings/wallets/NewWallet.tsx

@@ -1,22 +1,19 @@
 import { router } from "expo-router";
 import React from "react";
-import { Keyboard, TouchableWithoutFeedback, View } from "react-native";
+import { View } from "react-native";
 import Toast from "react-native-toast-message";
 import { Button } from "~/components/ui/button";
 import { Input } from "~/components/ui/input";
 import { Label } from "~/components/ui/label";
 import { Text } from "~/components/ui/text";
 import { useAppStore } from "~/lib/state/appStore";
 import Screen from "~/components/Screen";
+import DismissableKeyboardView from "~/components/DismissableKeyboardView";
 
 export function NewWallet() {
   const [name, setName] = React.useState("");
   return (
-    <TouchableWithoutFeedback
-      onPress={() => {
-        Keyboard.dismiss();
-      }}
-    >
+    <DismissableKeyboardView>
       <View className="flex-1 p-6">
         <Screen
           title="Connect Wallet"
@@ -51,6 +48,6 @@ export function NewWallet() {
           <Text>Continue</Text>
         </Button>
       </View>
-    </TouchableWithoutFeedback>
+    </DismissableKeyboardView>
   );
 }

pages/settings/wallets/RenameWallet.tsx

@@ -1,13 +1,14 @@
 import { router } from "expo-router";
 import React from "react";
-import { Keyboard, TouchableWithoutFeedback, View } from "react-native";
+import { View } from "react-native";
 import Toast from "react-native-toast-message";
 import { Button } from "~/components/ui/button";
 import { Input } from "~/components/ui/input";
 import { Text } from "~/components/ui/text";
 import { DEFAULT_WALLET_NAME } from "~/lib/constants";
 import { useAppStore } from "~/lib/state/appStore";
 import Screen from "~/components/Screen";
+import DismissableKeyboardView from "~/components/DismissableKeyboardView";
 
 export function RenameWallet() {
   const selectedWalletId = useAppStore((store) => store.selectedWalletId);
@@ -16,11 +17,7 @@ export function RenameWallet() {
     wallets[selectedWalletId].name || ""
   );
   return (
-    <TouchableWithoutFeedback
-      onPress={() => {
-        Keyboard.dismiss();
-      }}
-    >
+    <DismissableKeyboardView>
       <View className="flex-1 flex flex-col p-6 gap-3">
         <Screen
           title="Wallet Name"
@@ -53,6 +50,6 @@ export function RenameWallet() {
           <Text>Save</Text>
         </Button>
       </View>
-    </TouchableWithoutFeedback>
+    </DismissableKeyboardView>
   );
 }