feat: upgrade to Expo SDK 50

README.md

@@ -28,13 +28,13 @@ Nothing makes it into Ignite unless it's been proven on projects that Infinite R
 
 | Library           | Category             | Version | Description                                    |
 | ----------------- | -------------------- | ------- | ---------------------------------------------- |
-| React Native      | Mobile Framework     | v0.72   | The best cross-platform mobile framework       |
+| React Native      | Mobile Framework     | v0.73   | The best cross-platform mobile framework       |
 | React             | UI Framework         | v18     | The most popular UI framework in the world     |
 | TypeScript        | Language             | v5      | Static typechecking                            |
 | React Navigation  | Navigation           | v6      | Performant and consistent navigation framework |
 | MobX-State-Tree   | State Management     | v5      | Observable state tree                          |
 | MobX-React-Lite   | React Integration    | v3      | Re-render React performantly                   |
-| Expo              | SDK                  | v49     | Allows (optional) Expo modules                 |
+| Expo              | SDK                  | v50     | Allows (optional) Expo modules                 |
 | Expo Font         | Custom Fonts         | v11     | Import custom fonts                            |
 | Expo Localization | Internationalization | v14     | i18n support (including RTL!)                  |
 | Expo Status Bar   | Status Bar Library   | v1      | Status bar support                             |

boilerplate/app.config.ts

@@ -20,6 +20,7 @@ module.exports = ({ config }: ConfigContext): Partial<ExpoConfig> => {
     plugins: [
       ...existingPlugins,
       require("./plugins/withSplashScreen").withSplashScreen,
+      require("./plugins/withFlipperDisabled").withFlipperDisabled,
     ],
   }
 }

boilerplate/app.json

@@ -59,13 +59,15 @@
         "expo-build-properties",
         {
           "ios": {
-            "newArchEnabled": false
+            "newArchEnabled": false,
+            "flipper": false
           },
           "android": {
             "newArchEnabled": false
           }
         }
-      ]
+      ], 
+      "expo-font"
     ],
     "experiments": {
       "tsconfigPaths": true

boilerplate/app/utils/crashReporting.ts

@@ -1,9 +1,7 @@
 /**
  * If you're using Sentry
- *   RN   https://docs.sentry.io/platforms/react-native/
  *   Expo https://docs.expo.dev/guides/using-sentry/
  */
-// import * as Sentry from "sentry-expo"
 // import * as Sentry from "@sentry/react-native"
 
 /**
@@ -25,7 +23,6 @@
 export const initCrashReporting = () => {
   // Sentry.init({
   //   dsn: "YOUR DSN HERE",
-  //   enableInExpoDevelopment: true,
   //   debug: true, // If `true`, Sentry will try to print out useful debugging information if something goes wrong with sending the event. Set it to `false` in production
   // })
   // Bugsnag.start("YOUR API KEY")
@@ -59,8 +56,6 @@ export const reportCrash = (error: Error, type: ErrorType = ErrorType.FATAL) =>
     // In production, utilize crash reporting service of choice below:
     // RN
     // Sentry.captureException(error)
-    // Expo
-    // Sentry.Native.captureException(error)
     // crashlytics().recordError(error)
     // Bugsnag.notify(error)
   }

boilerplate/jest.config.js

@@ -1,11 +1,27 @@
 const { defaults: tsjPreset } = require("ts-jest/presets")
 
+const thirdPartyIgnorePatterns = [
+  "((jest-)?react-native|@react-native(-community)?)",
+  "expo(nent)?",
+  "@expo(nent)?/.*",
+  "@expo-google-fonts/.*",
+  "react-navigation",
+  "@react-navigation/.*",
+  "@unimodules/.*",
+  "unimodules",
+  "sentry-expo",
+  "native-base",
+  "react-native-svg",
+  "react-clone-referenced-element",
+  "react-native-code-push",
+]
+
 /** @type {import('@jest/types').Config.ProjectConfig} */
 module.exports = {
   ...tsjPreset,
   preset: "jest-expo",
   transformIgnorePatterns: [
-    "<rootDir>/node_modules/(react-clone-referenced-element|@react-native-community|react-navigation|@react-navigation/.*|@unimodules/.*|native-base|react-native-code-push)",
+    `<rootDir>/node_modules/(?!${thirdPartyIgnorePatterns.join("|")})`,
     "jest-runner",
   ],
   testPathIgnorePatterns: ["<rootDir>/node_modules/", "<rootDir>/.maestro/", "@react-native"],

boilerplate/package.json

@@ -32,34 +32,35 @@
   },
   "dependencies": {
     "@expo-google-fonts/space-grotesk": "^0.2.2",
-    "@react-native-async-storage/async-storage": "1.19.3",
+    "@expo/metro-runtime": "^3.1.1",
+    "@react-native-async-storage/async-storage": "^1.21.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.1",
+    "@shopify/flash-list": "^1.6.3",
     "apisauce": "3.0.1",
     "date-fns": "^2.30.0",
-    "expo": "^49.0.21",
-    "expo-application": "~5.4.0",
-    "expo-build-properties": "~0.8.3",
-    "expo-dev-client": "~2.4.12",
-    "expo-font": "~11.6.0",
-    "expo-linking": "~5.0.2",
-    "expo-localization": "~14.5.0",
-    "expo-splash-screen": "~0.20.4",
-    "expo-status-bar": "~1.6.0",
+    "expo": "^50.0.0",
+    "expo-application": "~5.8.3",
+    "expo-build-properties": "~0.11.0",
+    "expo-dev-client": "~3.3.6",
+    "expo-font": "~11.10.2",
+    "expo-linking": "~6.2.2",
+    "expo-localization": "~14.8.3",
+    "expo-splash-screen": "~0.26.3",
+    "expo-status-bar": "~1.11.1",
     "i18n-js": "3.9.2",
     "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-native": "0.72.7",
+    "react-native": "0.73.4",
     "react-native-drawer-layout": "4.0.0-alpha.1",
-    "react-native-gesture-handler": "~2.12.0",
-    "react-native-reanimated": "~3.3.0",
-    "react-native-safe-area-context": "4.6.3",
-    "react-native-screens": "~3.22.0",
+    "react-native-gesture-handler": "~2.14.0",
+    "react-native-reanimated": "~3.6.0",
+    "react-native-safe-area-context": "4.8.2",
+    "react-native-screens": "~3.29.0",
     "react-native-web": "~0.19.6"
   },
   "devDependencies": {
@@ -84,13 +85,12 @@
     "eslint-config-standard": "17.0.0",
     "eslint-plugin-import": "2.26.0",
     "eslint-plugin-n": "^15.0.0",
-    "eslint-plugin-node": "11.1.0",
     "eslint-plugin-promise": "6.0.0",
     "eslint-plugin-react": "7.30.0",
     "eslint-plugin-react-native": "4.0.0",
     "eslint-plugin-reactotron": "^0.1.2",
     "jest": "^29.2.1",
-    "jest-expo": "49.0.0",
+    "jest-expo": "~50.0.1",
     "patch-package": "6.4.7",
     "postinstall-prepare": "1.0.1",
     "prettier": "2.8.8",
@@ -103,15 +103,8 @@
     "ts-node": "^10.9.2",
     "typescript": "5.3.2"
   },
-  "expo": {
-    "install": {
-      "exclude": [
-        "typescript"
-      ]
-    }
-  },
   "engines": {
-    "node": ">=16"
+    "node": ">=18"
   },
   "prettier": {
     "printWidth": 100,

boilerplate/plugins/withFlipperDisabled.ts

@@ -0,0 +1,58 @@
+import { ConfigPlugin, withAppBuildGradle, withMainApplication } from "expo/config-plugins"
+
+/**
+ *
+ * Expo Config Plugin to disable Flipper entirely in Android
+ *
+ * How it works:
+ *   1) Remove the dependency from app/build.gradle
+ *   2) Remove ReactNativeFlipper initialization from MainApplication.kt
+ */
+export const withFlipperDisabled: ConfigPlugin = (config) => {
+  config = withAppBuildGradleMod(config)
+  config = withMainApplicationKtMod(config)
+  return config
+}
+
+const FLIPPER_DEPENDENCY = 'implementation("com.facebook.react:flipper-integration")'
+const FLIPPER_INITIALIZATION_REGEX =
+  /^\s+if \(BuildConfig.DEBUG\) {\s+ReactNativeFlipper\.initializeFlipper.*\s+}$/gm
+const FIND_FLIPPER_INITIALIZATION = 'ReactNativeFlipper.initializeFlipper'
+const FIND_FLIPPER_IMPORT = 'import com.facebook.react.flipper.ReactNativeFlipper'
+
+/**
+ * Modifies the `android/app/build.gradle` file to remove the following line:
+ *
+ * implementation 'com.facebook.flipper:flipper:${FLIPPER_VERSION}'
+ */
+const withAppBuildGradleMod: ConfigPlugin = (config) =>
+  withAppBuildGradle(config, (modConfig) => {
+    if (modConfig.modResults.contents.includes(FLIPPER_DEPENDENCY)) {
+      modConfig.modResults.contents = modConfig.modResults.contents.replace(FLIPPER_DEPENDENCY, "")
+    }
+    return modConfig
+  })
+
+/**
+ * Modifies the `android/app/src/main/java/com/bundle/id/MainApplication.kt` file to remove the following lines:
+ * if (BuildConfig.DEBUG) {
+ *     ReactNativeFlipper.initializeFlipper(this, reactNativeHost.reactInstanceManager)
+ * }
+ */
+const withMainApplicationKtMod: ConfigPlugin = (config) =>
+  withMainApplication(config, (modConfig) => {
+    if (modConfig.modResults.contents.includes(FIND_FLIPPER_IMPORT)) { 
+      modConfig.modResults.contents = modConfig.modResults.contents.replace(
+        FIND_FLIPPER_IMPORT,
+        "",
+      )
+    }
+    if (modConfig.modResults.contents.includes(FIND_FLIPPER_INITIALIZATION)) {
+      modConfig.modResults.contents = modConfig.modResults.contents.replace(
+        FLIPPER_INITIALIZATION_REGEX,
+        "",
+      )
+    }
+
+    return modConfig
+  })

src/commands/new.ts

@@ -714,11 +714,6 @@ module.exports = {
           appJson.expo.plugins[1][1].ios.deploymentTarget = "13.4"
         }
 
-        // this can go away once we're at SDK 50 since expo-font needs to be added here
-        if (expoVersion) {
-          appJson.expo.plugins.push("expo-font")
-        }
-
         write("./app.json", appJson)
       } catch (e) {
         log(e)

src/tools/expoGoCompatibility.ts

@@ -3,12 +3,8 @@
 // version of each package when generating a new project using Expo Go.
 // New ignited apps using prebuild will have more up-to-date versions of these packages.
 export const expoGoCompatExpectedVersions = {
-  "@react-native-async-storage/async-storage": "1.18.2",
-  "@shopify/flash-list": "1.4.3",
-  "expo-application": "~5.3.0",
-  "expo-font": "~11.4.0",
-  "expo-localization": "~14.3.0",
-  "react-native": "0.72.6",
+  "@react-native-async-storage/async-storage": "1.21.0",
+  "@shopify/flash-list": "1.6.3",
 }
 
 // This function takes a package.json file as a string and updates the versions of the

test/vanilla/ignite-new.test.ts

@@ -311,13 +311,13 @@ describe("ignite new", () => {
     it("should have changed the android bundle id", () => {
       const androidPackageName = APP_NAME.toLowerCase()
       const mainAppJava = filesystem.read(
-        `${appPath}/android/app/src/main/java/com/${androidPackageName}/MainApplication.java`,
+        `${appPath}/android/app/src/main/java/com/${androidPackageName}/MainApplication.kt`,
       )
-      expect(mainAppJava).toContain(`package com.${androidPackageName};`)
+      expect(mainAppJava).toContain(`package com.${androidPackageName}`)
       const mainActivityJava = filesystem.read(
-        `${appPath}/android/app/src/main/java/com/${androidPackageName}/MainActivity.java`,
+        `${appPath}/android/app/src/main/java/com/${androidPackageName}/MainActivity.kt`,
       )
-      expect(mainActivityJava).toContain(`package com.${androidPackageName};`)
+      expect(mainActivityJava).toContain(`package com.${androidPackageName}`)
     })
 
     it("should have modified package.json for proper run scripts", () => {