From 51c2c9e37cae21c908fec7038f0d221d83d5ed8f Mon Sep 17 00:00:00 2001 From: Frank Calise Date: Fri, 19 Jan 2024 17:00:56 -0500 Subject: [PATCH 01/12] feat: expo go 50 upgrade --- boilerplate/app.json | 3 ++- boilerplate/jest.config.js | 2 +- boilerplate/package.json | 35 ++++++++++++++++---------------- src/commands/new.ts | 5 ----- src/tools/expoGoCompatibility.ts | 9 +++----- 5 files changed, 24 insertions(+), 30 deletions(-) diff --git a/boilerplate/app.json b/boilerplate/app.json index f975acbdc..06bb6ca57 100644 --- a/boilerplate/app.json +++ b/boilerplate/app.json @@ -65,7 +65,8 @@ "newArchEnabled": false } } - ] + ], + "expo-font" ], "experiments": { "tsconfigPaths": true diff --git a/boilerplate/jest.config.js b/boilerplate/jest.config.js index 0f64b62a7..0b8610ed2 100644 --- a/boilerplate/jest.config.js +++ b/boilerplate/jest.config.js @@ -5,7 +5,7 @@ module.exports = { ...tsjPreset, preset: "jest-expo", transformIgnorePatterns: [ - "/node_modules/(react-clone-referenced-element|@react-native-community|react-navigation|@react-navigation/.*|@unimodules/.*|native-base|react-native-code-push)", + "/node_modules/(?!((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)", "jest-runner", ], testPathIgnorePatterns: ["/node_modules/", "/.maestro/", "@react-native"], diff --git a/boilerplate/package.json b/boilerplate/package.json index 1a3c41294..93cab0464 100644 --- a/boilerplate/package.json +++ b/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.2", "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": { @@ -90,7 +91,7 @@ "eslint-plugin-react-native": "4.0.0", "eslint-plugin-reactotron": "^0.1.1", "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", diff --git a/src/commands/new.ts b/src/commands/new.ts index 60c8af3e9..eecfa55cf 100644 --- a/src/commands/new.ts +++ b/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) diff --git a/src/tools/expoGoCompatibility.ts b/src/tools/expoGoCompatibility.ts index 317091952..258b9690b 100644 --- a/src/tools/expoGoCompatibility.ts +++ b/src/tools/expoGoCompatibility.ts @@ -3,12 +3,9 @@ // 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", + "react-native": "0.73.2", } // This function takes a package.json file as a string and updates the versions of the From e015753c5d146b9db400a6f02e13d08f5cd11fdb Mon Sep 17 00:00:00 2001 From: Frank Calise Date: Fri, 19 Jan 2024 18:07:31 -0500 Subject: [PATCH 02/12] test(cli): update tests to reference kotlin changes in cng --- src/tools/expoGoCompatibility.ts | 1 - test/vanilla/ignite-new.test.ts | 8 ++++---- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/tools/expoGoCompatibility.ts b/src/tools/expoGoCompatibility.ts index 258b9690b..c3fdd73de 100644 --- a/src/tools/expoGoCompatibility.ts +++ b/src/tools/expoGoCompatibility.ts @@ -5,7 +5,6 @@ export const expoGoCompatExpectedVersions = { "@react-native-async-storage/async-storage": "1.21.0", "@shopify/flash-list": "1.6.3", - "react-native": "0.73.2", } // This function takes a package.json file as a string and updates the versions of the diff --git a/test/vanilla/ignite-new.test.ts b/test/vanilla/ignite-new.test.ts index 41540a9c9..5bf227490 100644 --- a/test/vanilla/ignite-new.test.ts +++ b/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", () => { From a100642906297620c10b4595c1aa2b980b637675 Mon Sep 17 00:00:00 2001 From: Frank Calise Date: Fri, 19 Jan 2024 18:10:42 -0500 Subject: [PATCH 03/12] docs(README): stack version updates --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 9bdeefd58..364345026 100644 --- a/README.md +++ b/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 | From bea96d2e338fd671d851d0e514f06624e48b65df Mon Sep 17 00:00:00 2001 From: Frank Calise Date: Mon, 22 Jan 2024 10:45:14 -0500 Subject: [PATCH 04/12] fix(boilerplate): update crash reporting for sentry usage --- boilerplate/app/utils/crashReporting.ts | 5 ----- 1 file changed, 5 deletions(-) diff --git a/boilerplate/app/utils/crashReporting.ts b/boilerplate/app/utils/crashReporting.ts index 7c7948322..1750661d5 100644 --- a/boilerplate/app/utils/crashReporting.ts +++ b/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) } From 1f2c9a7938d5c585b8fb5ccb0a6f0f9e26122dd6 Mon Sep 17 00:00:00 2001 From: Frank Calise Date: Tue, 23 Jan 2024 17:19:56 -0500 Subject: [PATCH 05/12] feat: disable flipper in ios/android --- boilerplate/app.config.ts | 1 + boilerplate/app.json | 3 +- boilerplate/plugins/withFlipperDisabled.ts | 50 ++++++++++++++++++++++ 3 files changed, 53 insertions(+), 1 deletion(-) create mode 100644 boilerplate/plugins/withFlipperDisabled.ts diff --git a/boilerplate/app.config.ts b/boilerplate/app.config.ts index 77e3312d0..c69bec791 100644 --- a/boilerplate/app.config.ts +++ b/boilerplate/app.config.ts @@ -20,6 +20,7 @@ module.exports = ({ config }: ConfigContext): Partial => { plugins: [ ...existingPlugins, require("./plugins/withSplashScreen").withSplashScreen, + require("./plugins/withFlipperDisabled").withFlipperDisabled, ], } } diff --git a/boilerplate/app.json b/boilerplate/app.json index 06bb6ca57..f196addce 100644 --- a/boilerplate/app.json +++ b/boilerplate/app.json @@ -59,7 +59,8 @@ "expo-build-properties", { "ios": { - "newArchEnabled": false + "newArchEnabled": false, + "flipper": false }, "android": { "newArchEnabled": false diff --git a/boilerplate/plugins/withFlipperDisabled.ts b/boilerplate/plugins/withFlipperDisabled.ts new file mode 100644 index 000000000..5e6c03243 --- /dev/null +++ b/boilerplate/plugins/withFlipperDisabled.ts @@ -0,0 +1,50 @@ +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 + +/** + * 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("ReactNativeFlipper.initializeFlipper")) { + modConfig.modResults.contents = modConfig.modResults.contents.replace( + FLIPPER_INITIALIZATION_REGEX, + "", + ) + } + + return modConfig + }) From b9007f5be9651138022a5be0d7328d7c9653d6ef Mon Sep 17 00:00:00 2001 From: Frank Calise Date: Tue, 23 Jan 2024 22:40:06 -0500 Subject: [PATCH 06/12] fix(with-flipper-disabled): remove import statement --- boilerplate/plugins/withFlipperDisabled.ts | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/boilerplate/plugins/withFlipperDisabled.ts b/boilerplate/plugins/withFlipperDisabled.ts index 5e6c03243..c8d9a990a 100644 --- a/boilerplate/plugins/withFlipperDisabled.ts +++ b/boilerplate/plugins/withFlipperDisabled.ts @@ -17,6 +17,8 @@ export const withFlipperDisabled: ConfigPlugin = (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: @@ -39,7 +41,13 @@ const withAppBuildGradleMod: ConfigPlugin = (config) => */ const withMainApplicationKtMod: ConfigPlugin = (config) => withMainApplication(config, (modConfig) => { - if (modConfig.modResults.contents.includes("ReactNativeFlipper.initializeFlipper")) { + 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, "", From 7d66ce19b6203df2d34e50758e274be90d9f19f0 Mon Sep 17 00:00:00 2001 From: Frank Calise Date: Thu, 8 Feb 2024 07:00:24 -0500 Subject: [PATCH 07/12] chore: RN update --- boilerplate/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/boilerplate/package.json b/boilerplate/package.json index 93cab0464..996d16990 100644 --- a/boilerplate/package.json +++ b/boilerplate/package.json @@ -55,7 +55,7 @@ "mobx-state-tree": "5.3.0", "react": "18.2.0", "react-dom": "18.2.0", - "react-native": "0.73.2", + "react-native": "0.73.4", "react-native-drawer-layout": "4.0.0-alpha.1", "react-native-gesture-handler": "~2.14.0", "react-native-reanimated": "~3.6.0", From 591e0b6f336f0ac8f861d6f4c8eedda50ba8135d Mon Sep 17 00:00:00 2001 From: Frank Calise Date: Thu, 8 Feb 2024 07:34:48 -0500 Subject: [PATCH 08/12] chore: remove unmaintained lint plugin --- boilerplate/package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/boilerplate/package.json b/boilerplate/package.json index 996d16990..08f2588d6 100644 --- a/boilerplate/package.json +++ b/boilerplate/package.json @@ -85,7 +85,6 @@ "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", From 9bbc223b64ba2d405a4f176e0459059dde86b27c Mon Sep 17 00:00:00 2001 From: Frank Calise Date: Thu, 8 Feb 2024 07:35:31 -0500 Subject: [PATCH 09/12] chore: update min node version --- boilerplate/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/boilerplate/package.json b/boilerplate/package.json index 08f2588d6..556e01833 100644 --- a/boilerplate/package.json +++ b/boilerplate/package.json @@ -111,7 +111,7 @@ } }, "engines": { - "node": ">=16" + "node": ">=18" }, "prettier": { "printWidth": 100, From 33e0ea985c9d463a5b329e47f145d40320f68a7c Mon Sep 17 00:00:00 2001 From: Frank Calise Date: Fri, 9 Feb 2024 12:41:22 -0500 Subject: [PATCH 10/12] chore(boilerplate): remove TS npx expo upgrade exclusion since TS node is fixed --- boilerplate/package.json | 7 ------- 1 file changed, 7 deletions(-) diff --git a/boilerplate/package.json b/boilerplate/package.json index 7590f8448..9229c7dc2 100644 --- a/boilerplate/package.json +++ b/boilerplate/package.json @@ -103,13 +103,6 @@ "ts-node": "^10.9.2", "typescript": "5.3.2" }, - "expo": { - "install": { - "exclude": [ - "typescript" - ] - } - }, "engines": { "node": ">=18" }, From c1ced250b4266aa71681dd8a8596260786ccb232 Mon Sep 17 00:00:00 2001 From: Frank Calise Date: Fri, 9 Feb 2024 12:41:32 -0500 Subject: [PATCH 11/12] chore(boilerplate): readable jest config --- boilerplate/jest.config.js | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/boilerplate/jest.config.js b/boilerplate/jest.config.js index 0b8610ed2..a48aa325f 100644 --- a/boilerplate/jest.config.js +++ b/boilerplate/jest.config.js @@ -1,11 +1,28 @@ 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: [ - "/node_modules/(?!((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)", + `/node_modules/(?!(${thirdPartyIgnorePatterns.join('|')}))`, "jest-runner", ], testPathIgnorePatterns: ["/node_modules/", "/.maestro/", "@react-native"], From 3330e0038d72e06c2109804cc42612939c09f061 Mon Sep 17 00:00:00 2001 From: Frank Calise Date: Fri, 9 Feb 2024 15:13:27 -0500 Subject: [PATCH 12/12] refactor(boilerplate): jest.config.js regex fun --- boilerplate/jest.config.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/boilerplate/jest.config.js b/boilerplate/jest.config.js index a48aa325f..49c06bde8 100644 --- a/boilerplate/jest.config.js +++ b/boilerplate/jest.config.js @@ -1,8 +1,7 @@ const { defaults: tsjPreset } = require("ts-jest/presets") const thirdPartyIgnorePatterns = [ - "(jest-)?react-native", - "@react-native(-community)?)", + "((jest-)?react-native|@react-native(-community)?)", "expo(nent)?", "@expo(nent)?/.*", "@expo-google-fonts/.*", @@ -22,7 +21,7 @@ module.exports = { ...tsjPreset, preset: "jest-expo", transformIgnorePatterns: [ - `/node_modules/(?!(${thirdPartyIgnorePatterns.join('|')}))`, + `/node_modules/(?!${thirdPartyIgnorePatterns.join("|")})`, "jest-runner", ], testPathIgnorePatterns: ["/node_modules/", "/.maestro/", "@react-native"],