chore: upgrade to expo v53

.github/workflows/linting.yml

@@ -23,7 +23,7 @@ jobs:
       - name: 🏗 Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: 18.x
+          node-version: 22.x
           cache: yarn
 
       - name: 🏗 Setup EAS

.github/workflows/pull_requests.yml

@@ -17,7 +17,7 @@ jobs:
       - name: 🏗 Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: 18.x
+          node-version: 22.x
           cache: yarn
 
       - name: 🏗 Setup EAS

.github/workflows/release.yml

@@ -40,7 +40,7 @@ jobs:
       - name: 🏗 Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: 18.x
+          node-version: 22.x
           cache: yarn
 
       - name: 🏗 Setup EAS

app/_layout.tsx

@@ -2,7 +2,7 @@ import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
 import {
   DarkTheme,
   DefaultTheme,
-  Theme,
+  type Theme,
   ThemeProvider,
 } from "@react-navigation/native";
 import * as Font from "expo-font";
@@ -114,10 +114,7 @@ export default function RootLayout() {
       <NotificationProvider>
         <ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
           <StatusBar style={isDarkColorScheme ? "light" : "dark"} />
-          <SafeAreaView
-            className="w-full h-full bg-background"
-            edges={["left", "right", "bottom"]}
-          >
+          <SafeAreaView className="w-full h-full bg-background">
             <GestureHandlerRootView>
               <BottomSheetModalProvider>
                 <UserInactivityProvider>

components/Alert.tsx

@@ -1,5 +1,5 @@
 import { View } from "react-native";
-import { SvgProps } from "react-native-svg";
+import { type SvgProps } from "react-native-svg";
 import {
   Card,
   CardContent,

components/CreateInvoice.tsx

@@ -1,4 +1,4 @@
-import { Nip47Transaction } from "@getalby/sdk/dist/nwc";
+import { type nwc } from "@getalby/sdk";
 import * as Clipboard from "expo-clipboard";
 import { router } from "expo-router";
 import React from "react";
@@ -82,7 +82,7 @@ export function CreateInvoice() {
   React.useEffect(() => {
     let polling = true;
     let pollCount = 0;
-    let prevTransaction: Nip47Transaction | undefined;
+    let prevTransaction: nwc.Nip47Transaction | undefined;
     (async () => {
       while (polling) {
         try {

components/DualCurrencyInput.tsx

@@ -74,7 +74,7 @@ export function DualCurrencyInput({
     <View className="w-full flex flex-col items-center justify-center gap-5">
       <Input
         key={inputMode}
-        ref={inputRef}
+        ref={inputRef as React.RefObject<TextInput>}
         className={cn(
           "w-full border-transparent bg-transparent text-center mt-3",
           ((max && Number(amount) > max) || (min && Number(amount) < min)) &&

components/FocusableCamera.tsx

@@ -1,21 +1,11 @@
-import { BarcodeScanningResult, CameraView } from "expo-camera";
+import { type BarcodeScanningResult, CameraView } from "expo-camera";
 import React from "react";
-import { TouchableOpacity } from "react-native";
 
 type FocusableCameraProps = {
   onScanned(data: string): void;
 };
 
 export function FocusableCamera({ onScanned }: FocusableCameraProps) {
-  const [autoFocus, setAutoFocus] = React.useState(true);
-
-  const focusCamera = () => {
-    setAutoFocus(false);
-    setTimeout(() => {
-      setAutoFocus(true);
-    }, 200);
-  };
-
   const handleBarCodeScanned = ({ data }: BarcodeScanningResult) => {
     onScanned(data);
   };
@@ -26,20 +16,7 @@ export function FocusableCamera({ onScanned }: FocusableCameraProps) {
       barcodeScannerSettings={{
         barcodeTypes: ["qr"],
       }}
-      autofocus={autoFocus ? "on" : "off"}
-    >
-      <TouchableOpacity
-        activeOpacity={1}
-        onPress={focusCamera}
-        style={{
-          position: "absolute",
-          top: 0,
-          left: 0,
-          width: "100%",
-          height: "100%",
-          backgroundColor: "transparent",
-        }}
-      />
-    </CameraView>
+      autofocus={"on"}
+    />
   );
 }

components/Icons.tsx

@@ -38,7 +38,7 @@ import {
   PopiconsBoltSolid as ZapIcon,
 } from "@popicons/react-native";
 import { cssInterop } from "nativewind";
-import { SvgProps } from "react-native-svg";
+import { type SvgProps } from "react-native-svg";
 
 function interopIcon(icon: React.FunctionComponent<SvgProps>) {
   cssInterop(icon, {

components/Screen.tsx

@@ -1,6 +1,6 @@
-import { NativeStackHeaderRightProps } from "@react-navigation/native-stack/src/types";
+import { type NativeStackHeaderRightProps } from "@react-navigation/native-stack";
 import { Stack } from "expo-router";
-import { StackAnimationTypes } from "react-native-screens";
+import { type StackAnimationTypes } from "react-native-screens";
 
 type ScreenProps = {
   title: string;

components/ToastConfig.tsx

@@ -1,6 +1,6 @@
 import { Link } from "expo-router";
 import { View } from "react-native";
-import { ToastConfig } from "react-native-toast-message";
+import { type ToastConfig } from "react-native-toast-message";
 import { CheckCircleIcon, XCircleIcon } from "~/components/Icons";
 import { Button } from "./ui/button";
 import { Text } from "./ui/text";

components/TransactionItem.tsx

@@ -1,4 +1,4 @@
-import { Nip47Transaction } from "@getalby/sdk/dist/nwc";
+import { type nwc } from "@getalby/sdk";
 import dayjs from "dayjs";
 import { router } from "expo-router";
 import React from "react";
@@ -12,7 +12,7 @@ import { useGetFiatAmount } from "~/hooks/useGetFiatAmount";
 import { cn, safeNpubEncode } from "~/lib/utils";
 
 type Props = {
-  tx: Nip47Transaction;
+  tx: nwc.Nip47Transaction;
 };
 
 export function TransactionItem({ tx }: Props) {

components/WalletSwitcher.tsx

@@ -1,6 +1,6 @@
 import {
   BottomSheetBackdrop,
-  BottomSheetBackdropProps,
+  type BottomSheetBackdropProps,
   BottomSheetModal,
   BottomSheetView,
 } from "@gorhom/bottom-sheet";
@@ -10,7 +10,7 @@ import Toast from "react-native-toast-message";
 import { ChevronDownIcon, WalletIcon } from "~/components/Icons";
 import { Text } from "~/components/ui/text";
 import { DEFAULT_WALLET_NAME } from "~/lib/constants";
-import { useAppStore, Wallet } from "~/lib/state/appStore";
+import { useAppStore, type Wallet } from "~/lib/state/appStore";
 import { useColorScheme } from "~/lib/useColorScheme";
 import { cn } from "~/lib/utils";
 

components/icons/FailedTransaction.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { useColorScheme } from "react-native";
-import Svg, { Path, Rect, SvgProps } from "react-native-svg";
+import Svg, { Path, Rect, type SvgProps } from "react-native-svg";
 
 const FailedTransactionIcon = (props: SvgProps) => {
   const colorScheme = useColorScheme();

components/icons/LargeArrowDown.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import Svg, { Path, SvgProps } from "react-native-svg";
+import Svg, { Path, type SvgProps } from "react-native-svg";
 const LargeArrowDown = (props: SvgProps) => (
   <Svg width={48} height={48} {...props}>
     <Path

components/icons/LargeArrowUp.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import Svg, { Path, SvgProps } from "react-native-svg";
+import Svg, { Path, type SvgProps } from "react-native-svg";
 const LargeArrowUp = (props: SvgProps) => (
   <Svg width={48} height={48} {...props} fill={"#374151"}>
     <Path

components/icons/NWCIcon.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { useColorScheme } from "react-native";
-import Svg, { Path, SvgProps } from "react-native-svg";
+import Svg, { Path, type SvgProps } from "react-native-svg";
 
 const NWCIcon = (props: SvgProps) => {
   const colorScheme = useColorScheme();

components/icons/PendingTransaction.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { useColorScheme } from "react-native";
-import Svg, { Path, Rect, SvgProps } from "react-native-svg";
+import Svg, { Path, Rect, type SvgProps } from "react-native-svg";
 
 const PendingTransactionIcon = (props: SvgProps) => {
   const colorScheme = useColorScheme();

components/icons/ReceivedTransaction.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { useColorScheme } from "react-native";
-import Svg, { Path, Rect, SvgProps } from "react-native-svg";
+import Svg, { Path, Rect, type SvgProps } from "react-native-svg";
 
 const ReceivedTransactionIcon = (props: SvgProps) => {
   const colorScheme = useColorScheme();

components/icons/RedeemIcon.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { useColorScheme } from "react-native";
-import Svg, { Path, SvgProps } from "react-native-svg";
+import Svg, { Path, type SvgProps } from "react-native-svg";
 
 // TODO: Replace with PopiconsWithdrawalSolid once fixed in @popicons/react-native
 const RedeemIcon = (props: SvgProps) => {

components/icons/SentTransaction.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { useColorScheme } from "react-native";
-import Svg, { Path, Rect, SvgProps } from "react-native-svg";
+import Svg, { Path, Rect, type SvgProps } from "react-native-svg";
 
 const SentTransactionIcon = (props: SvgProps) => {
   const colorScheme = useColorScheme();