chore(deps): upgrade to Expo SDK 58

TODO.md

@@ -8,6 +8,16 @@ Remove items from this list once they are done.
   in `app.json` (url/organization/project) is already set up for the upload. Needs
   [Bugsink ≥ 2.0.14](https://www.bugsink.com/docs/sourcemaps/); verify the project slug in
   Bugsink matches `cnapp`
+- consider turning on R8 for Android release builds (SDK 58 default, disabled via
+  `android.enableMinifyInReleaseBuilds: false` in the `expo-build-properties` plugin config in
+  `app.json`): smaller APK, but native Android stack traces get obfuscated unless the R8 mapping
+  file reaches Bugsink, which doesn't document ProGuard/R8 mapping support. Also check whether
+  Stripe or Sentry need ProGuard keep rules
+- verify the SDK 58 upgrade on devices: `useFrameworks: "dynamic"` (needed since
+  `@stripe/stripe-react-native` 0.78 pulls the Stripe iOS SDK through Swift Package Manager) is
+  untested with Skia, Reanimated and Sentry, so do an iOS EAS build first; then a test-mode
+  purchase on Android and iOS including a card that requires authentication (exercises the
+  `handleURLCallback` deep link), an expiry reminder notification, and an error that lands in Bugsink
 - test in ios emulator? (`npm run ios`, requires macOS)
 - characters in the password input field are invisible
 - ask for date of birth and place of study when registering: galtinn now requires them on its web

app.json

@@ -71,7 +71,18 @@
           "backgroundColor": "#E5E2D7"
         }
       ],
-      "@react-native-vector-icons/feather"
+      "@react-native-vector-icons/feather",
+      [
+        "expo-build-properties",
+        {
+          "ios": {
+            "useFrameworks": "dynamic"
+          },
+          "android": {
+            "enableMinifyInReleaseBuilds": false
+          }
+        }
+      ]
     ],
     "extra": {
       "eas": {

jest.config.js

@@ -1,6 +1,8 @@
 /** @type {import('jest').Config} */
 module.exports = {
   preset: 'jest-expo',
+  // Loads the web builds of Reanimated and Worklets, which run without the native side
+  resolver: 'react-native-reanimated/jest/resolver',
   setupFiles: ['react-native-gesture-handler/jestSetup', '<rootDir>/jest.setup.js'],
   moduleNameMapper: {
     // Metro resolves SVGs to components via react-native-svg-transformer; Jest gets a stub instead

package.json

@@ -17,65 +17,58 @@
   "dependencies": {
     "@date-fns/tz": "^1.5.0",
     "@react-native-async-storage/async-storage": "2.2.0",
-    "@react-native-vector-icons/feather": "^13.1.3",
-    "@react-navigation/bottom-tabs": "^7.18.18",
-    "@react-navigation/native": "^7.3.18",
-    "@react-navigation/native-stack": "^7.18.10",
-    "@sentry/react-native": "~8.24.0",
-    "@shopify/react-native-skia": "2.6.2",
-    "@stripe/stripe-react-native": "0.64.0",
-    "@tanstack/query-async-storage-persister": "^5.102.8",
-    "@tanstack/react-query": "^5.102.8",
-    "@tanstack/react-query-persist-client": "^5.102.8",
+    "@react-native-vector-icons/feather": "^14.0.0",
+    "@react-navigation/bottom-tabs": "^7.21.0",
+    "@react-navigation/native": "^7.5.1",
+    "@react-navigation/native-stack": "^7.21.0",
+    "@sentry/react-native": "~8.28.0",
+    "@shopify/react-native-skia": "2.14.0",
+    "@stripe/stripe-react-native": "0.81.0",
+    "@tanstack/query-async-storage-persister": "^5.105.0",
+    "@tanstack/react-query": "^5.105.0",
+    "@tanstack/react-query-persist-client": "^5.105.0",
     "date-fns": "^4.4.0",
     "email-validator": "^2.0.4",
-    "expo": "~57.0.20",
-    "expo-asset": "~57.0.16",
-    "expo-constants": "~57.0.17",
-    "expo-dev-client": "~57.0.18",
-    "expo-font": "~57.0.3",
-    "expo-navigation-bar": "~57.0.2",
-    "expo-notifications": "~57.0.17",
-    "expo-splash-screen": "~57.0.8",
-    "expo-status-bar": "~57.0.1",
-    "react": "19.2.3",
-    "react-hook-form": "^7.87.0",
-    "react-native": "0.86.3",
+    "expo": "~58.0.21",
+    "expo-asset": "~58.0.19",
+    "expo-build-properties": "~58.0.11",
+    "expo-constants": "~58.0.14",
+    "expo-dev-client": "~58.0.17",
+    "expo-font": "~58.0.11",
+    "expo-navigation-bar": "~58.0.4",
+    "expo-notifications": "~58.1.7",
+    "expo-splash-screen": "~58.0.12",
+    "expo-status-bar": "~58.0.4",
+    "react": "19.3.0",
+    "react-hook-form": "^7.91.0",
+    "react-native": "0.88.1",
     "react-native-fast-confetti": "^2.0.2",
-    "react-native-gesture-handler": "~2.32.0",
-    "react-native-reanimated": "4.5.1",
-    "react-native-safe-area-context": "~5.7.0",
-    "react-native-screens": "~4.26.0",
-    "react-native-svg": "15.15.4",
+    "react-native-gesture-handler": "~3.3.0",
+    "react-native-reanimated": "4.7.1",
+    "react-native-safe-area-context": "~5.10.1",
+    "react-native-screens": "~4.30.0",
+    "react-native-svg": "15.16.0",
     "react-native-svg-transformer": "^1.5.3",
-    "react-native-worklets": "0.10.1"
+    "react-native-worklets": "0.13.0"
   },
   "devDependencies": {
     "@babel/core": "^7.24.9",
-    "@testing-library/react-native": "^14.0.1",
-    "@types/jest": "^29.5.14",
-    "@types/react": "~19.2.10",
-    "eas-build-cache-provider": "^25.3.0",
+    "@testing-library/react-native": "^14.1.0",
+    "@types/jest": "30.0.0",
+    "@types/react": "~19.3.0",
+    "eas-build-cache-provider": "^27.1.0",
     "eslint": "^9.39.5",
-    "eslint-config-expo": "~57.0.2",
+    "eslint-config-expo": "~58.0.4",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-prettier": "^5.5.6",
-    "jest": "^29.7.0",
-    "jest-expo": "~57.0.5",
-    "prettier": "^3.9.6",
-    "test-renderer": "~1.2.0",
+    "eslint-plugin-prettier": "^5.5.7",
+    "jest": "~30.5.2",
+    "jest-expo": "~58.0.13",
+    "prettier": "^3.9.10",
+    "test-renderer": "~1.3.1",
     "typescript": "~6.0.3"
   },
-  "expo": {
-    "install": {
-      "exclude": [
-        "@sentry/react-native"
-      ]
-    }
-  },
   "allowScripts": {
-    "@sentry/cli@3.6.1": true,
-    "@shopify/react-native-skia@2.6.2": true,
-    "unrs-resolver@1.12.2": true
+    "unrs-resolver@1.12.2": true,
+    "@sentry/cli@3.8.0": true
   }
 }

src/components/TextField.tsx

@@ -1,5 +1,15 @@
 import React, { useState } from 'react';
-import { StyleProp, StyleSheet, Text, TextInput, TextInputProps, TextStyle, View, ViewStyle } from 'react-native';
+import {
+  StyleProp,
+  StyleSheet,
+  Text,
+  TextInput,
+  TextInputInstance,
+  TextInputProps,
+  TextStyle,
+  View,
+  ViewStyle,
+} from 'react-native';
 
 import theme from '@/theme';
 
@@ -12,7 +22,7 @@ export type TextFieldProps = TextInputProps & {
 const PLACEHOLDER_COLOR = `${theme.colors.chateauBlue}99`;
 
 /** Labelled input styled like neuf.no: a white pill with a blue border that turns orange on focus */
-const TextField = React.forwardRef<TextInput, TextFieldProps>(
+const TextField = React.forwardRef<TextInputInstance, TextFieldProps>(
   ({ label, fieldStyle, style, onFocus, onBlur, placeholderTextColor, ...rest }, ref) => {
     const [focused, setFocused] = useState(false);
 

src/hooks.tsx

@@ -18,7 +18,7 @@ export const useDeepLinking = () => {
   const { handleURLCallback } = useStripe();
 
   const handleDeepLink = useCallback(
-    async (url: string | null) => {
+    async (url: string | null | undefined) => {
       if (!url) {
         return;
       }

src/modules/login/useLogin.tsx

@@ -19,11 +19,14 @@ const useLogin = () => {
     setFocus,
   } = useForm<LoginFormValues>();
 
-  const onSubmit = handleSubmit(({ email, password }) => {
+  const submit = handleSubmit(({ email, password }) => {
     // goBack works since Login is always pushed from Membership
     login({ username: email, password }, { onSuccess: () => navigation.goBack() });
   });
 
+  // RN press events aren't DOM SyntheticEvents, so don't forward them to handleSubmit
+  const onSubmit = () => submit();
+
   return { onSubmit, isLoggingIn: isPending, isSubmitted, setFocus, control, errors: { ...errors }, loginError: error };
 };
 

src/modules/register/useUserRegister.tsx

@@ -20,7 +20,7 @@ const useUserRegister = () => {
     clearErrors,
   } = useForm<UserRegisterFormValues>();
 
-  const onSubmit = handleSubmit((values) => {
+  const submit = handleSubmit((values) => {
     clearErrors();
     register(values, {
       onSuccess: () => navigation.goBack(),
@@ -38,6 +38,9 @@ const useUserRegister = () => {
     });
   });
 
+  // RN press events aren't DOM SyntheticEvents, so don't forward them to handleSubmit
+  const onSubmit = () => submit();
+
   return {
     isRegisteringUser: isPending,
     onSubmit,

src/modules/settings/Settings.test.tsx

@@ -71,7 +71,7 @@ it('opens the delete account screen', async () => {
 });
 
 it('opens the privacy policy', async () => {
-  const openURL = jest.spyOn(Linking, 'openURL').mockResolvedValue(true);
+  const openURL = jest.spyOn(Linking, 'openURL').mockResolvedValue();
   const { findByText } = await renderSettings();
 
   await fireEvent.press(await findByText('Personvern'));