chore: bump expo sdk to v57

.claude/skills/expo-upgrade/SKILL.md

@@ -0,0 +1,151 @@
+---
+name: expo-upgrade
+description: Framework (OSS). Guidelines for upgrading Expo SDK versions and fixing dependency issues
+version: 1.0.0
+license: MIT
+---
+
+## References
+
+- ./references/react-19.md -- SDK +54: React 19 changes (useContext → use, Context.Provider → Context, forwardRef removal)
+- ./references/new-architecture.md -- SDK +53: New Architecture migration guide
+- ./references/react-compiler.md -- SDK +54: React Compiler setup and migration guide
+- ./references/native-tabs.md -- SDK +55: Native tabs changes (Icon/Label/Badge now accessed via NativeTabs.Trigger.\*)
+- ./references/expo-av-to-audio.md -- SDK +55: Migrate audio playback and recording from expo-av to expo-audio
+- ./references/expo-av-to-video.md -- SDK +55: Migrate video playback from expo-av to expo-video
+- ./references/react-navigation-to-expo-router.md -- SDK +56: Migrate `@react-navigation/*` imports to `expo-router` entry points (codemod + manual mapping)
+
+## Beta/Preview Releases
+
+Beta versions use `.preview` suffix (e.g., `55.0.0-preview.2`), published under `@next` tag.
+
+Check if latest is beta: https://exp.host/--/api/v2/versions (look for `-preview` in `expoVersion`)
+
+```bash
+npx expo install expo@next --fix  # install beta
+```
+
+## Step-by-Step Upgrade Process
+
+> If upgrading from SDK 55 or earlier, skip SDK 56 and upgrade directly to SDK 57. Don't use `expo@57.0.8` or below. SDK 55 with Hermes V1 enabled, SDK 56, and older SDK 57 releases contain a Hermes V1 memory regression that can drastically increase memory usage when using `react-native-worklets` or `react-native-reanimated`.
+
+1. Upgrade Expo and dependencies
+
+```bash
+npx expo install expo@latest
+npx expo install --fix
+```
+
+2. Run diagnostics: `npx expo-doctor`
+
+3. Clear caches and reinstall
+
+```bash
+npx expo export -p ios --clear
+rm -rf node_modules .expo
+watchman watch-del-all
+```
+
+## Breaking Changes Checklist
+
+- Check for removed APIs in release notes
+- Update import paths for moved modules
+- Review native module changes requiring prebuild
+- Test all camera, audio, and video features
+- Verify navigation still works correctly
+
+## Prebuild for Native Changes
+
+**First check if `ios/` and `android/` directories exist in the project.** If neither directory exists, the project uses Continuous Native Generation (CNG) and native projects are regenerated at build time — skip this section and "Clear caches for bare workflow" entirely.
+
+If upgrading requires native changes:
+
+```bash
+npx expo prebuild --clean
+```
+
+This regenerates the `ios` and `android` directories. Ensure the project is not a bare workflow app before running this command.
+
+## Clear caches for bare workflow
+
+These steps only apply when `ios/` and/or `android/` directories exist in the project:
+
+- Clear the cocoapods cache for iOS: `cd ios && pod install --repo-update`
+- Clear derived data for Xcode: `npx expo run:ios --no-build-cache`
+- Clear the Gradle cache for Android: `cd android && ./gradlew clean`
+
+## Housekeeping
+
+- Review release notes for the target SDK version at https://expo.dev/changelog
+- Update versioned docs links in agent instruction files (`AGENTS.md`). The default template links to `https://docs.expo.dev/versions/v<version>/`. Search for `docs.expo.dev/versions/` and bump each link to the new SDK version.
+- If using Expo SDK 54 or later, ensure react-native-worklets is installed — this is required for react-native-reanimated to work.
+- Enable React Compiler in SDK 54+ by adding `"experiments": { "reactCompiler": true }` to app.json — it's stable and recommended
+- Delete sdkVersion from `app.json` to let Expo manage it automatically
+- Remove implicit packages from `package.json`: `@babel/core`, `babel-preset-expo`, `expo-constants`.
+- If the babel.config.js only contains 'babel-preset-expo', delete the file
+- If the metro.config.js only contains expo defaults, delete the file
+
+## Deprecated Packages
+
+| Old Package          | Replacement                                          |
+| -------------------- | ---------------------------------------------------- |
+| `expo-av`            | `expo-audio` and `expo-video`                        |
+| `expo-permissions`   | Individual package permission APIs                   |
+| `@expo/vector-icons` | `expo-symbols` (for SF Symbols)                      |
+| `AsyncStorage`       | `expo-sqlite/localStorage/install`                   |
+| `expo-app-loading`   | `expo-splash-screen`                                 |
+| expo-linear-gradient | experimental_backgroundImage + CSS gradients in View |
+
+When migrating deprecated packages, update all code usage before removing the old package. For expo-av, consult the migration references to convert Audio.Sound to useAudioPlayer, Audio.Recording to useAudioRecorder, and Video components to VideoView with useVideoPlayer.
+
+## expo.install.exclude
+
+Check if package.json has excluded packages:
+
+```json
+{
+  "expo": { "install": { "exclude": ["react-native-reanimated"] } }
+}
+```
+
+Exclusions are often workarounds that may no longer be needed after upgrading. Review each one.
+
+## Removing patches
+
+Check if there are any outdated patches in the `patches/` directory. Remove them if they are no longer needed.
+
+## Postcss
+
+- `autoprefixer` isn't needed in SDK +53. Remove it from dependencies and check `postcss.config.js` or `postcss.config.mjs` to remove it from the plugins list.
+- Use `postcss.config.mjs` in SDK +53.
+
+## Metro
+
+Remove redundant metro config options:
+
+- resolver.unstable_enablePackageExports is enabled by default in SDK +53.
+- `experimentalImportSupport` is enabled by default in SDK +54.
+- `EXPO_USE_FAST_RESOLVER=1` is removed in SDK +54.
+- cjs and mjs extensions are supported by default in SDK +50.
+- Expo webpack is deprecated, migrate to [Expo Router and Metro web](https://docs.expo.dev/router/migrate/from-expo-webpack/).
+
+## Hermes engine v1
+
+Hermes V1 is the default on SDK 56 and later. SDK 55 apps using Hermes V1, all SDK 56 apps, and SDK 57 apps before `expo@57.0.9` may encounter a memory regression when importing `react-native-worklets` or `react-native-reanimated`. Upgrade directly to SDK 57 and `expo@57.0.9` or later. Do not recommend Worklets Bundle Mode as a production workaround; it is unsupported and experimental and may not work as expected.
+
+Do not guide users to opt in to or out of Hermes V1. Changing the Hermes version from the SDK default is unsupported and has significant build and dependency-management caveats.
+
+## New Architecture
+
+The new architecture is enabled by default, the app.json field `"newArchEnabled": true` is no longer needed as it's the default. Expo Go only supports the new architecture as of SDK +53.
+
+## Submitting Feedback
+
+If you encounter errors, misleading or outdated information in this skill, report it so Expo can improve:
+
+```bash
+npx --yes submit-expo-feedback@latest --category skills --subject "expo-upgrade" "<actionable feedback>"
+```
+
+Only submit when you have something specific and actionable to report. Include as much relevant context as possible.
+If an AI agent repeatedly failed or the user had to take over an Expo task, load the expo-skill-feedback skill and follow its eval-candidate flow instead of reusing the command above.

app.config.js

@@ -93,6 +93,7 @@ export default ({ config }) => {
       "expo-location",
       "expo-router",
       "expo-secure-store",
+      "expo-status-bar",
       [
         "@sentry/react-native/expo",
         {

app/_layout.tsx

@@ -1,13 +1,13 @@
 import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
+import * as Sentry from "@sentry/react-native";
+import * as Font from "expo-font";
 import {
   DarkTheme,
   DefaultTheme,
+  Slot,
   type Theme,
   ThemeProvider,
-} from "@react-navigation/native";
-import * as Sentry from "@sentry/react-native";
-import * as Font from "expo-font";
-import { Slot } from "expo-router";
+} from "expo-router";
 import * as SplashScreen from "expo-splash-screen";
 import { StatusBar } from "expo-status-bar";
 import { swrConfiguration } from "lib/swr";

components/ConnectionInfoModal.tsx

@@ -50,6 +50,7 @@ function ConnectionInfoModal({
     if (!visible || !nwcInfo) {
       return;
     }
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- resets statuses for the new connection before the probe below starts; both belong to this effect
     setRelayStatuses(nwcInfo.relayUrls.map(() => undefined));
     const pool = new NWCClient({
       relayUrls: nwcInfo.relayUrls,

components/DismissableKeyboardView.tsx

@@ -1,4 +1,4 @@
-import { useHeaderHeight } from "@react-navigation/elements";
+import { useHeaderHeight } from "expo-router/build/react-navigation/elements";
 import React from "react";
 import {
   Keyboard,

components/QRCodeScanner.tsx

@@ -1,5 +1,5 @@
-import { useIsFocused } from "@react-navigation/native";
 import { Camera, PermissionStatus } from "expo-camera";
+import { useIsFocused } from "expo-router";
 import React, { useEffect } from "react";
 import { View } from "react-native";
 import { CameraOffIcon } from "~/components/Icons";
@@ -23,10 +23,17 @@ function QRCodeScanner({
     PermissionStatus.UNDETERMINED,
   );
 
+  async function scan() {
+    const { status } = await Camera.requestCameraPermissionsAsync();
+    setPermissionStatus(status);
+    setScanning(status === "granted");
+  }
+
   useEffect(() => {
     // Add some timeout to allow the screen transition to finish before
     // starting the camera to avoid stutters
     if (startScanning) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- pairs with the delayed scan() below, both belong to this effect
       setLoading(true);
       window.setTimeout(async () => {
         await scan();
@@ -35,12 +42,6 @@ function QRCodeScanner({
     }
   }, [startScanning]);
 
-  async function scan() {
-    const { status } = await Camera.requestCameraPermissionsAsync();
-    setPermissionStatus(status);
-    setScanning(status === "granted");
-  }
-
   const handleScanned = async (data: string) => {
     if (isScanning) {
       const result = await onScanned(data);

components/Screen.tsx

@@ -1,5 +1,4 @@
-import { type NativeStackHeaderItemProps } from "@react-navigation/native-stack";
-import { router, Stack } from "expo-router";
+import { type NativeStackHeaderItemProps, router, Stack } from "expo-router";
 import { Platform, TouchableOpacity } from "react-native";
 import { type StackAnimationTypes } from "react-native-screens";
 import { ChevronLeftIcon } from "~/components/Icons";

components/TransactionItem.tsx

@@ -1,7 +1,6 @@
 import type { Nip47Transaction } from "@getalby/sdk";
 import dayjs from "dayjs";
 import { router } from "expo-router";
-import React from "react";
 import { TouchableOpacity, View } from "react-native";
 import FailedTransactionIcon from "~/components/icons/FailedTransaction";
 import PendingTransactionIcon from "~/components/icons/PendingTransaction";
@@ -74,7 +73,7 @@ export function TransactionItem({ tx }: Props) {
           "flex flex-row items-center gap-4 px-6 py-4",
         )}
       >
-        <View className="w-10 h-10 bg-muted rounded-full flex flex-col items-center justify-center">
+        <View className="w-[40px] h-[40px] bg-muted rounded-full flex flex-col items-center justify-center">
           <Icon />
         </View>
         <View className="flex flex-col flex-1">

components/ui/skeleton.tsx

@@ -1,7 +1,6 @@
 // This is a custom component - https://github.com/getAlby/go/pull/279
 // Do NOT edit this file while upgrading react native primitive components
 
-import * as React from "react";
 import { TextProps } from "react-native";
 import Animated from "react-native-reanimated";
 import { cn } from "~/lib/utils";

context/Notification.tsx

@@ -28,7 +28,7 @@ export const NotificationProvider = ({ children }: any) => {
     const handleNotification = (
       notification: ExpoNotifications.Notification,
     ) => {
-      const deepLink = notification.request.content.data.deepLink as string;
+      const deepLink = notification.request.content.data?.deepLink as string;
       if (deepLink) {
         handleLink(deepLink);
       }

hooks/__tests__/useHandleLinking.ts

@@ -1,13 +1,6 @@
 import { router } from "expo-router";
-import * as RN from "react-native";
 import { handleLink } from "../../lib/link";
 
-jest.spyOn(RN.InteractionManager, "runAfterInteractions").mockImplementation(
-  jest.fn().mockImplementation((callback) => {
-    callback();
-  }),
-);
-
 jest.mock("expo-router");
 
 const mockLNURLPayResponse = {
@@ -141,8 +134,6 @@ describe("handleLink", () => {
       "nostrnwc://connect?appname=Test%20App&callback=myapp%3A%2F%2Fopen%3Fredirect%3Dhttps%253A%252F%252Fdev.example.com%252Fdone&appicon=https%3A%2F%2Fcdn.example.com%2Ficon.png",
     );
 
-    await new Promise((resolve) => setTimeout(resolve, 100));
-
     expect(router.push).toHaveBeenCalledWith({
       pathname: "/settings/wallets/connect",
       params: {
@@ -162,8 +153,6 @@ describe("handleLink", () => {
       "alby://payment_notification?app_pubkey=abc&transaction=%7B%22type%22%3A%22incoming%22%2C%22state%22%3A%22settled%22%2C%22invoice%22%3A%22lnbc123%22%2C%22description%22%3A%22myapp%3A%2F%2Fopen%3Fredirect%3Dhttps%253A%252F%252Fdev.example.com%252Fdone%26payload%3D%257B%2522screen%2522%253A%2522payment%2522%257D%22%2C%22description_hash%22%3A%22%22%2C%22preimage%22%3A%22abc%22%2C%22payment_hash%22%3A%22def%22%2C%22amount%22%3A21000%2C%22fees_paid%22%3A0%2C%22created_at%22%3A1753275708%2C%22expires_at%22%3A1753362108%2C%22settled_at%22%3A1753275741%2C%22settle_deadline%22%3Anull%2C%22metadata%22%3Anull%7D",
     );
 
-    await new Promise((resolve) => setTimeout(resolve, 100));
-
     expect(router.push).toHaveBeenCalledWith({
       pathname: "/transaction",
       params: {
@@ -179,7 +168,9 @@ describe("handleLink", () => {
       "should parse the URL '%s' and navigate correctly",
       async (url, expectedOutput) => {
         await handleLink("exp://127.0.0.1:8081/--/" + url);
-        await new Promise((resolve) => setTimeout(resolve, 100)); // due to safeRouterPush
+        // handleLnurl is fire-and-forget from handleLink, so wait for its
+        // internal lnurlLib.getDetails() lookup to resolve before asserting
+        await new Promise((resolve) => setTimeout(resolve, 100));
         assertRedirect(expectedOutput.path, expectedOutput.params);
       },
     );
@@ -190,7 +181,9 @@ describe("handleLink", () => {
       "should parse the URL '%s' and navigate correctly",
       async (url, expectedOutput) => {
         await handleLink(url);
-        await new Promise((resolve) => setTimeout(resolve, 100)); // due to safeRouterPush
+        // handleLnurl is fire-and-forget from handleLink, so wait for its
+        // internal lnurlLib.getDetails() lookup to resolve before asserting
+        await new Promise((resolve) => setTimeout(resolve, 100));
         assertRedirect(expectedOutput.path, expectedOutput.params);
       },
     );