fix: adjust keyboard behavior for iOS using KeyboardAvoidingView

getAlby · Sep 11, 2024 · b083c92 · b083c92
1 parent 2fcc019
commit b083c92
Show file tree

Hide file tree

Showing 8 changed files with 325 additions and 309 deletions.
diff --git a/pages/receive/Receive.tsx b/pages/receive/Receive.tsx
@@ -1,5 +1,5 @@
 import { Link, router } from "expo-router";
-import { Keyboard, Share, TouchableWithoutFeedback, View } from "react-native";
+import { Platform, KeyboardAvoidingView, Keyboard, Share, TouchableWithoutFeedback, View } from "react-native";
 import { Button } from "~/components/ui/button";
 import * as Clipboard from "expo-clipboard";
 import React from "react";
@@ -271,44 +271,46 @@ export function Receive() {
       )}
       {/* TODO: move to one place - this is all copied from LNURL-Pay */}
       {!invoice && enterCustomAmount && (
-        <TouchableWithoutFeedback
-          onPress={() => {
-            Keyboard.dismiss();
-          }}
+        <KeyboardAvoidingView
+          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+          keyboardVerticalOffset={Platform.OS === 'ios' ? 100 : 0}
+          className="flex-1"
         >
-          <View className="flex-1 flex flex-col">
-            <View className="flex-1 h-full flex flex-col justify-center gap-5 p-3">
-              <DualCurrencyInput
-                amount={amount}
-                setAmount={setAmount}
-                autoFocus
-              />
-              <View>
-                <Text className="text-muted-foreground text-center mt-6">
-                  Description (optional)
-                </Text>
-                <Input
-                  className="w-full text-center border-transparent bg-transparent native:text-2xl font-semibold2"
-                  placeholder="No description"
-                  value={comment}
-                  onChangeText={setComment}
-                  returnKeyType="done"
+          <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+            <View className="flex-1 flex flex-col">
+              <View className="flex-1 h-full flex flex-col justify-center gap-5 p-3">
+                <DualCurrencyInput
+                  amount={amount}
+                  setAmount={setAmount}
+                  autoFocus
                 />
+                <View>
+                  <Text className="text-muted-foreground text-center mt-6">
+                    Description (optional)
+                  </Text>
+                  <Input
+                    className="w-full text-center border-transparent bg-transparent native:text-2xl font-semibold2"
+                    placeholder="No description"
+                    value={comment}
+                    onChangeText={setComment}
+                    returnKeyType="done"
+                  />
+                </View>
+              </View>
+              <View className="m-6">
+                <Button
+                  size="lg"
+                  className="flex flex-row gap-2"
+                  onPress={() => generateInvoice(+amount)}
+                  disabled={isLoading}
+                >
+                  {isLoading && <Loading className="text-primary-foreground" />}
+                  <Text>Create Invoice</Text>
+                </Button>
               </View>
             </View>
-            <View className="m-6">
-              <Button
-                size="lg"
-                className="flex flex-row gap-2"
-                onPress={() => generateInvoice(+amount)}
-                disabled={isLoading}
-              >
-                {isLoading && <Loading className="text-primary-foreground" />}
-                <Text>Create Invoice</Text>
-              </Button>
-            </View>
-          </View>
-        </TouchableWithoutFeedback>
+          </TouchableWithoutFeedback>
+        </KeyboardAvoidingView>
       )}
     </>
   );

diff --git a/pages/send/LNURLPay.tsx b/pages/send/LNURLPay.tsx
@@ -1,7 +1,7 @@
 import Screen from "~/components/Screen";
 import { router, useLocalSearchParams } from "expo-router";
 import React from "react";
-import { Keyboard, TouchableWithoutFeedback, View } from "react-native";
+import { KeyboardAvoidingView, Platform, Keyboard, TouchableWithoutFeedback, View } from "react-native";
 import { Button } from "~/components/ui/button";
 import { Text } from "~/components/ui/text";
 import { LNURLPayServiceResponse, lnurl } from "~/lib/lnurl";
@@ -46,52 +46,54 @@ export function LNURLPay() {
   return (
     <>
       <Screen title="Send" />
-      <TouchableWithoutFeedback
-        onPress={() => {
-          Keyboard.dismiss();
-        }}
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        keyboardVerticalOffset={Platform.OS === 'ios' ? 100 : 0}
+        className="flex-1"
       >
-        <View className="flex-1 flex flex-col">
-          <View className="flex-1 justify-center items-center p-6 gap-6">
-            <DualCurrencyInput
-              amount={amount}
-              setAmount={setAmount}
-              autoFocus
-            />
-            <View className="w-full">
-              <Text className="text-muted-foreground text-center font-semibold2">
-                Comment
-              </Text>
-              <Input
-                className="w-full border-transparent bg-transparent text-center native:text-2xl font-semibold2"
-                placeholder="Enter an optional comment"
-                value={comment}
-                onChangeText={setComment}
-                returnKeyType="done"
+        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+          <View className="flex-1 flex flex-col">
+            <View className="flex-1 justify-center items-center p-6 gap-6">
+              <DualCurrencyInput
+                amount={amount}
+                setAmount={setAmount}
+                autoFocus
               />
+              <View className="w-full">
+                <Text className="text-muted-foreground text-center font-semibold2">
+                  Comment
+                </Text>
+                <Input
+                  className="w-full border-transparent bg-transparent text-center native:text-2xl font-semibold2"
+                  placeholder="Enter an optional comment"
+                  value={comment}
+                  onChangeText={setComment}
+                  returnKeyType="done"
+                />
+              </View>
+              <View>
+                <Text className="text-muted-foreground text-center font-semibold2">
+                  To
+                </Text>
+                <Text className="text-center text-foreground text-2xl font-medium2">
+                  {originalText}
+                </Text>
+              </View>
             </View>
-            <View>
-              <Text className="text-muted-foreground text-center font-semibold2">
-                To
-              </Text>
-              <Text className="text-center text-foreground text-2xl font-medium2">
-                {originalText}
-              </Text>
+            <View className="p-6">
+              <Button
+                size="lg"
+                className="flex flex-row gap-2"
+                onPress={requestInvoice}
+                disabled={isLoading}
+              >
+                {isLoading && <Loading className="text-primary-foreground" />}
+                <Text>Next</Text>
+              </Button>
             </View>
           </View>
-          <View className="p-6">
-            <Button
-              size="lg"
-              className="flex flex-row gap-2"
-              onPress={requestInvoice}
-              disabled={isLoading}
-            >
-              {isLoading && <Loading className="text-primary-foreground" />}
-              <Text>Next</Text>
-            </Button>
-          </View>
-        </View>
-      </TouchableWithoutFeedback>
+        </TouchableWithoutFeedback>
+      </KeyboardAvoidingView>
     </>
   );
 }
diff --git a/pages/send/Send.tsx b/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 { KeyboardAvoidingView, Platform, Keyboard, TouchableWithoutFeedback, View } from "react-native";
 import * as Clipboard from "expo-clipboard";
 import { lnurl } from "lib/lnurl";
 import { Button } from "~/components/ui/button";
@@ -151,33 +151,35 @@ export function Send() {
             </>
           )}
           {keyboardOpen && (
-            <TouchableWithoutFeedback
-              onPress={() => {
-                Keyboard.dismiss();
-              }}
+            <KeyboardAvoidingView
+              behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+              keyboardVerticalOffset={Platform.OS === 'ios' ? 100 : 0}
+              className="flex-1"
             >
-              <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">
-                    Type or paste a Lightning Address, lightning invoice or
-                    LNURL.
-                  </Text>
-                  <Input
-                    className="w-full text-center mt-6 border-transparent bg-transparent !text-4xl font-semibold2 "
-                    placeholder="[email protected]"
-                    value={keyboardText}
-                    onChangeText={setKeyboardText}
-                    inputMode="email"
-                    autoFocus
-                    returnKeyType="done"
-                    // aria-errormessage="inputError"
-                  />
+              <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+                <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">
+                      Type or paste a Lightning Address, lightning invoice or
+                      LNURL.
+                    </Text>
+                    <Input
+                      className="w-full text-center mt-6 border-transparent bg-transparent !text-4xl font-semibold2 "
+                      placeholder="[email protected]"
+                      value={keyboardText}
+                      onChangeText={setKeyboardText}
+                      inputMode="email"
+                      autoFocus
+                      returnKeyType="done"
+                      // aria-errormessage="inputError"
+                    />
+                  </View>
+                  <Button onPress={submitKeyboardText} size="lg">
+                    <Text>Next</Text>
+                  </Button>
                 </View>
-                <Button onPress={submitKeyboardText} size="lg">
-                  <Text>Next</Text>
-                </Button>
-              </View>
-            </TouchableWithoutFeedback>
+              </TouchableWithoutFeedback>
+            </KeyboardAvoidingView>
           )}
         </>
       )}

diff --git a/pages/settings/FiatCurrency.tsx b/pages/settings/FiatCurrency.tsx
@@ -1,6 +1,6 @@
 import { router } from "expo-router";
 import React from "react";
-import { Keyboard, TouchableWithoutFeedback, View } from "react-native";
+import { KeyboardAvoidingView, Platform, Keyboard, TouchableWithoutFeedback, View } from "react-native";
 import Toast from "react-native-toast-message";
 import { Button } from "~/components/ui/button";
 import { Input } from "~/components/ui/input";
@@ -13,40 +13,42 @@ export function FiatCurrency() {
     useAppStore.getState().fiatCurrency,
   );
   return (
-    <View className="flex-1 flex flex-col p-6 gap-3">
-      <Screen
-        title="Units & Currency"
-      />
-      <TouchableWithoutFeedback
-        onPress={() => {
-          Keyboard.dismiss();
-        }}
-      >
-        <View className="flex-1">
-          <Input
-            autoFocus
-            className="w-full text-center"
-            placeholder="USD"
-            value={fiatCurrency}
-            onChangeText={setFiatCurrency}
-            returnKeyType="done"
-          // aria-errormessage="inputError"
-          />
+    <KeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      keyboardVerticalOffset={Platform.OS === 'ios' ? 100 : 0}
+      className="flex-1"
+    >
+      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+        <View className="flex-1 p-6">
+          <Screen title="Units & Currency" />
+          <View className="flex-1 flex flex-col">
+            <View className="flex-1">
+              <Input
+                autoFocus
+                className="w-full text-center"
+                placeholder="USD"
+                value={fiatCurrency}
+                onChangeText={setFiatCurrency}
+                returnKeyType="done"
+              // aria-errormessage="inputError"
+              />
+            </View>
+            <Button
+              size="lg"
+              onPress={() => {
+                useAppStore.getState().setFiatCurrency(fiatCurrency);
+                Toast.show({
+                  type: "success",
+                  text1: "Fiat currency updated",
+                });
+                router.back();
+              }}
+            >
+              <Text>Save</Text>
+            </Button>
+          </View>
         </View>
       </TouchableWithoutFeedback>
-      <Button
-        size="lg"
-        onPress={() => {
-          useAppStore.getState().setFiatCurrency(fiatCurrency);
-          Toast.show({
-            type: "success",
-            text1: "Fiat currency updated",
-          });
-          router.back();
-        }}
-      >
-        <Text>Save</Text>
-      </Button>
-    </View>
+    </KeyboardAvoidingView>
   );
 }