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 <[email protected]>
Co-authored-by: Jamon Holmgren <[email protected]>

Author: 3 people

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} />,