feat: upgrade to Expo SDK 52 (#2843 by @frankcalise)

* feat: upgrade to Expo SDK 52

* fix(boilerplate): revert mmkv back to v2 for old arch

* fix(cli): add `newArch` to cli output

* fix(boilerplate): update deps via expo install --fix

* fix(boilerplate): disable a few lint rules

* chore: deps

* chore: ts fixes

* fix: return empty array if patches directory does not exist

* fix(boilerplate): simplify splash config

* chore: update rn

* fix(boilerplate): transparent img for splash

* fix(boilerplate): web fixes for gesture-handler, useEffect, welcome screen styling and drawer fix (#2856 by @frankcalise)

* fix(cli): upgrade yaml pkg to support multi line strings properly (#2862 by @frankcalise)

---------

Co-authored-by: Tyler Williams <tyler@coolsoftware.dev>
Co-authored-by: Jamon Holmgren <code@jamon.dev>

boilerplate/.eslintrc.js

@@ -26,6 +26,8 @@ module.exports = {
       },
     ],
     "@typescript-eslint/no-var-requires": 0,
+    "@typescript-eslint/no-require-imports": 0,
+    "@typescript-eslint/no-empty-object-type": 0,
     // eslint
     "no-use-before-define": 0,
     "no-restricted-imports": [

boilerplate/app.json

@@ -9,14 +9,10 @@
     "orientation": "portrait",
     "userInterfaceStyle": "automatic",
     "icon": "./assets/images/app-icon-all.png",
-    "splash": {
-      "image": "./assets/images/splash-logo-all.png",
-      "resizeMode": "contain",
-      "backgroundColor": "#191015"
-    },
     "updates": {
       "fallbackToCacheTimeout": 0
     },
+    "newArchEnabled": false,
     "jsEngine": "hermes",
     "assetBundlePatterns": [
       "**/*"
@@ -27,47 +23,29 @@
       "adaptiveIcon": {
         "foregroundImage": "./assets/images/app-icon-android-adaptive-foreground.png",
         "backgroundImage": "./assets/images/app-icon-android-adaptive-background.png"
-      },
-      "splash": {
-        "image": "./assets/images/splash-logo-android-universal.png",
-        "resizeMode": "contain",
-        "backgroundColor": "#191015"
       }
     },
     "ios": {
       "icon": "./assets/images/app-icon-ios.png",
       "supportsTablet": true,
-      "bundleIdentifier": "com.helloworld",
-      "splash": {
-        "image": "./assets/images/splash-logo-ios-mobile.png",
-        "tabletImage": "./assets/images/splash-logo-ios-tablet.png",
-        "resizeMode": "contain",
-        "backgroundColor": "#191015"
-      }
+      "bundleIdentifier": "com.helloworld"
     },
     "web": {
       "favicon": "./assets/images/app-icon-web-favicon.png",
-      "splash": {
-        "image": "./assets/images/splash-logo-web.png",
-        "resizeMode": "contain",
-        "backgroundColor": "#191015"
-      },
       "bundler": "metro"
     },
     "plugins": [
       "expo-localization",
+      "expo-font",
       [
-        "expo-build-properties",
+        "expo-splash-screen",
         {
-          "ios": {
-            "newArchEnabled": false
-          },
-          "android": {
-            "newArchEnabled": false
-          }
+          "image": "./assets/images/app-icon-android-adaptive-foreground.png",
+          "imageWidth": 300,
+          "resizeMode": "contain",
+          "backgroundColor": "#191015"
         }
-      ], 
-      "expo-font"
+      ]
     ],
     "experiments": {
       "tsconfigPaths": true

boilerplate/app/app.tsx

@@ -56,7 +56,7 @@ const config = {
 }
 
 interface AppProps {
-  hideSplashScreen: () => Promise<boolean>
+  hideSplashScreen: () => Promise<void>
 }
 
 /**

boilerplate/app/models/Episode.ts

@@ -50,7 +50,7 @@ export const EpisodeModel = types
             date: formatted,
           }),
         }
-      } catch (error) {
+      } catch {
         return { textLabel: "", accessibilityLabel: "" }
       }
     },

boilerplate/app/screens/DemoShowroomScreen/DemoShowroomScreen.tsx

@@ -102,17 +102,13 @@ export const DemoShowroomScreen: FC<DemoTabScreenProps<"DemoShowroom">> =
       }
     }, [open])
 
-    const handleScroll = useCallback(
-      (sectionIndex: number, itemIndex = 0) => {
-        listRef.current?.scrollToLocation({
-          animated: true,
-          itemIndex,
-          sectionIndex,
-        })
-        toggleDrawer()
-      },
-      [toggleDrawer],
-    )
+    const handleScroll = useCallback((sectionIndex: number, itemIndex = 0) => {
+      listRef.current?.scrollToLocation({
+        animated: true,
+        itemIndex,
+        sectionIndex,
+      })
+    }, [])
 
     // handle Web links
     useEffect(() => {

boilerplate/app/screens/WelcomeScreen.tsx

@@ -9,7 +9,7 @@ import {
 import { isRTL } from "../i18n"
 import { useStores } from "../models" // @demo remove-current-line
 import { AppStackScreenProps } from "../navigators"
-import type { ThemedStyle } from "@/theme"
+import { $styles, type ThemedStyle } from "@/theme"
 import { useHeader } from "../utils/useHeader" // @demo remove-current-line
 import { useSafeAreaInsetsStyle } from "../utils/useSafeAreaInsetsStyle"
 import { useAppTheme } from "@/utils/useAppTheme"
@@ -48,7 +48,7 @@ export const WelcomeScreen: FC<WelcomeScreenProps> = observer(
     const $bottomContainerInsets = useSafeAreaInsetsStyle(["bottom"])
 
     return (
-      <Screen preset="fixed">
+      <Screen preset="fixed" contentContainerStyle={$styles.flex1}>
         <View style={themed($topContainer)}>
           <Image style={themed($welcomeLogo)} source={welcomeLogo} resizeMode="contain" />
           <Text

boilerplate/app/utils/gestureHandler.ts

@@ -1,2 +1,6 @@
 // Don't import react-native-gesture-handler on web
 // https://reactnavigation.org/docs/drawer-navigator/#installation
+
+// This however is needed at the moment
+// https://github.com/software-mansion/react-native-gesture-handler/issues/2402
+import "setimmediate"

boilerplate/app/utils/useHeader.tsx

@@ -1,6 +1,7 @@
-import { useLayoutEffect } from "react"
+import { useEffect, useLayoutEffect } from "react"
 import { useNavigation } from "@react-navigation/native"
 import { Header, HeaderProps } from "../components"
+import { Platform } from "react-native"
 
 /**
  * A hook that can be used to easily set the Header of a react-navigation screen from within the screen's component.
@@ -14,9 +15,17 @@ export function useHeader(
 ) {
   const navigation = useNavigation()
 
+  /**
+   * We need to have multiple implementations of this hook for web and mobile.
+   * Web needs to use useEffect to avoid a rendering loop.
+   * In mobile and also to avoid a visible header jump when navigating between screens, we use
+   * `useLayoutEffect`, which will apply the settings before the screen renders.
+   */
+  const usePlatformEffect = Platform.OS === "web" ? useEffect : useLayoutEffect
+
   // To avoid a visible header jump when navigating between screens, we use
   // `useLayoutEffect`, which will apply the settings before the screen renders.
-  useLayoutEffect(() => {
+  usePlatformEffect(() => {
     navigation.setOptions({
       headerShown: true,
       header: () => <Header {...headerProps} />,

boilerplate/package.json

@@ -14,8 +14,6 @@
     "test:maestro": "maestro test .maestro/FavoritePodcast.yaml",
     "adb": "adb reverse tcp:9090 tcp:9090 && adb reverse tcp:3000 tcp:3000 && adb reverse tcp:9001 tcp:9001 && adb reverse tcp:8081 tcp:8081",
     "postinstall": "patch-package",
-    "bundle:visualize": "npx react-native-bundle-visualizer",
-    "bundle:visualize:dev": "npx react-native-bundle-visualizer --dev",
     "build:ios:sim": "eas build --profile development --platform ios --local",
     "build:ios:dev": "eas build --profile development:device --platform ios --local",
     "build:ios:prod": "eas build --profile production --platform ios --local",
@@ -32,39 +30,39 @@
   },
   "dependencies": {
     "@expo-google-fonts/space-grotesk": "^0.2.2",
-    "@expo/metro-runtime": "~3.2.1",
+    "@expo/metro-runtime": "~4.0.0",
     "@react-navigation/bottom-tabs": "^6.3.2",
     "@react-navigation/native": "^6.0.2",
     "@react-navigation/native-stack": "^6.0.2",
-    "@shopify/flash-list": "^1.6.4",
+    "@shopify/flash-list": "1.7.1",
     "apisauce": "3.0.1",
     "date-fns": "^4.1.0",
-    "expo": "~51.0.8",
-    "expo-application": "~5.9.1",
-    "expo-build-properties": "~0.12.1",
-    "expo-dev-client": "~4.0.14",
-    "expo-font": "~12.0.5",
-    "expo-linking": "~6.3.1",
-    "expo-localization": "~15.0.3",
-    "expo-splash-screen": "~0.27.4",
-    "expo-status-bar": "~1.12.1",
-    "expo-system-ui": "~3.0.7",
+    "expo": "~52.0.7",
+    "expo-application": "~6.0.1",
+    "expo-build-properties": "~0.13.1",
+    "expo-dev-client": "~5.0.1",
+    "expo-font": "~13.0.1",
+    "expo-linking": "~7.0.2",
+    "expo-localization": "~16.0.0",
+    "expo-splash-screen": "~0.29.10",
+    "expo-status-bar": "~2.0.0",
+    "expo-system-ui": "~4.0.3",
     "i18next": "^23.14.0",
     "intl-pluralrules": "^2.0.1",
     "mobx": "6.10.2",
     "mobx-react-lite": "4.0.5",
     "mobx-state-tree": "5.3.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "react-i18next": "^15.0.1",
-    "react-native": "0.74.5",
-    "react-native-drawer-layout": "4.0.0-alpha.9",
-    "react-native-gesture-handler": "~2.16.1",
+    "react-native": "0.76.3",
+    "react-native-drawer-layout": "^4.0.1",
+    "react-native-gesture-handler": "~2.20.2",
     "react-native-keyboard-controller": "^1.12.7",
     "react-native-mmkv": "^2.12.2",
-    "react-native-reanimated": "~3.15.0",
-    "react-native-safe-area-context": "4.10.5",
-    "react-native-screens": "3.31.1",
+    "react-native-reanimated": "~3.16.1",
+    "react-native-safe-area-context": "4.12.0",
+    "react-native-screens": "~4.1.0",
     "react-native-web": "~0.19.6"
   },
   "devDependencies": {
@@ -73,10 +71,10 @@
     "@babel/runtime": "^7.20.0",
     "@testing-library/react-native": "^12.5.2",
     "@types/jest": "^29.2.1",
-    "@types/react": "~18.2.14",
+    "@types/react": "~18.3.12",
     "babel-jest": "^29.2.1",
     "eslint": "^8.57.0",
-    "eslint-config-expo": "^7.1.2",
+    "eslint-config-expo": "~8.0.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-n": "^17.10.2",
@@ -85,7 +83,7 @@
     "eslint-plugin-react-native": "^4.1.0",
     "eslint-plugin-reactotron": "^0.1.2",
     "jest": "^29.2.1",
-    "jest-expo": "~51.0.2",
+    "jest-expo": "~52.0.1",
     "patch-package": "^8.0.0",
     "postinstall-prepare": "1.0.1",
     "prettier": "^3.3.3",

package.json

@@ -49,7 +49,7 @@
     "deepmerge-json": "^1.1.0",
     "gluegun": "5.1.6",
     "sharp": "0.32.6",
-    "yaml": "^1.10.0"
+    "yaml": "^2.6.1"
   },
   "devDependencies": {
     "@semantic-release/git": "^9.0.0",

src/commands/new.ts

@@ -158,6 +158,13 @@ export interface Options {
    * @default mst
    */
   state?: StateMgmt
+  /**
+   * Whether or not to enable the New Architecture
+   *
+   * Input Source: `prompt.ask` | `parameter.option`
+   * @default false
+   */
+  newArch?: boolean
 }
 
 module.exports = {
@@ -458,16 +465,13 @@ module.exports = {
     // #endregion
 
     // #region Experimental Features parsing
-    let newArch
     let expoVersion
     let expoRouter
     const experimentalFlags = options.experimental?.split(",") ?? []
     log(`experimentalFlags: ${experimentalFlags}`)
 
     experimentalFlags.forEach((flag) => {
-      if (flag === "new-arch") {
-        newArch = true
-      } else if (flag.indexOf("expo-") > -1) {
+      if (flag.indexOf("expo-") > -1) {
         if (flag !== "expo-router") {
           expoVersion = flag.substring(5)
         } else {
@@ -515,21 +519,17 @@ module.exports = {
 
     // New Architecture
     const defaultNewArch = false
-    let experimentalNewArch = useDefault(newArch) ? defaultNewArch : boolFlag(newArch)
-    if (experimentalNewArch === undefined) {
+    let newArchEnabled = useDefault(options.newArch) ? defaultNewArch : options.newArch
+    if (newArchEnabled === undefined) {
       const newArchResponse = await prompt.ask<{ experimentalNewArch: boolean }>(() => ({
         type: "confirm",
         name: "experimentalNewArch",
-        message: "[Experimental] the New Architecture?",
+        message: "Enable the New Architecture?",
         initial: defaultNewArch,
         format: prettyPrompt.format.boolean,
         prefix,
       }))
-      experimentalNewArch = newArchResponse.experimentalNewArch
-      // update experimental flags if needed for buildCliCommand output
-      if (experimentalNewArch && !experimentalFlags.includes("new-arch")) {
-        experimentalFlags.push("new-arch")
-      }
+      newArchEnabled = newArchResponse.experimentalNewArch
     }
 
     // #endregion
@@ -662,7 +662,7 @@ module.exports = {
         packageJsonRaw = findAndRemoveDependencies(packageJsonRaw, mstDependenciesToRemove)
       }
 
-      if (experimentalNewArch) {
+      if (newArchEnabled) {
         log(`Swapping new architecture compatible dependencies...`)
         packageJsonRaw = findAndUpdateDependencyVersions(
           packageJsonRaw,
@@ -795,9 +795,8 @@ module.exports = {
         // Inject ignite version to app.json
         appJson.ignite.version = igniteVersion
 
-        if (experimentalNewArch === true) {
-          appJson.expo.plugins[1][1].ios.newArchEnabled = true
-          appJson.expo.plugins[1][1].android.newArchEnabled = true
+        if (newArchEnabled === true) {
+          appJson.expo.newArchEnabled = true
         }
 
         if (experimentalExpoRouter) {
@@ -995,6 +994,7 @@ module.exports = {
           packager: packagerName,
           targetPath,
           removeDemo,
+          newArch: newArchEnabled,
           experimental: experimentalFlags.length > 0 ? experimentalFlags.join(",") : undefined,
           workflow,
           useCache,