feat: upgrade templates to 0.81 (#507)

thymikee · web-flow · commit 03dc80e19bac · 2025-09-05T13:07:49.000+02:00
* feat: upgrade templates to 0.81

* changeset

* cli 20

* update Metro to 0.83; port start command changes

* allow runninig with older @react-native/metro-config versions

* 0.81.1

* Enable CADisableMinimumFrameDurationOnPhone by default

* enable edgeToEdge

* fixup metro start on older versions
diff --git a/.changeset/breezy-hotels-bathe.md b/.changeset/breezy-hotels-bathe.md
@@ -0,0 +1,20 @@
+---
+'@rock-js/plugin-brownfield-android': minor
+'@rock-js/platform-android': minor
+'@rock-js/welcome-screen': minor
+'@rock-js/plugin-metro': minor
+'rock': minor
+'@rock-js/config': minor
+'create-rock': minor
+'@rock-js/platform-apple-helpers': minor
+'@rock-js/platform-ios': minor
+'@rock-js/plugin-brownfield-ios': minor
+'@rock-js/plugin-repack': minor
+'@rock-js/provider-github': minor
+'@rock-js/provider-s3': minor
+'@rock-js/test-helpers': minor
+'@rock-js/tools': minor
+'rock-docs': minor
+---
+
+feat: upgrade templates to 0.81
diff --git a/packages/cli/package.json b/packages/cli/package.json
@@ -24,15 +24,15 @@
   },
   "dependencies": {
     "adm-zip": "^0.5.16",
-    "@react-native-community/cli-config": "^19.1.0",
+    "@react-native-community/cli-config": "^20.0.0",
     "@rock-js/config": "^0.9.2",
     "@rock-js/tools": "^0.9.2",
     "commander": "^12.1.0",
     "tar": "^7.4.3",
     "tslib": "^2.3.0"
   },
   "devDependencies": {
-    "@react-native-community/cli-types": "^19.1.0",
+    "@react-native-community/cli-types": "^20.0.0",
     "@types/adm-zip": "^0.5.7"
   },
   "publishConfig": {
diff --git a/packages/platform-android/package.json b/packages/platform-android/package.json
@@ -19,13 +19,13 @@
     "publish:verdaccio": "npm publish --registry http://localhost:4873 --userconfig ../../.npmrc"
   },
   "dependencies": {
-    "@react-native-community/cli-config-android": "^19.1.0",
+    "@react-native-community/cli-config-android": "^20.0.0",
     "@rock-js/tools": "^0.9.2",
     "adm-zip": "^0.5.16",
     "tslib": "^2.3.0"
   },
   "devDependencies": {
-    "@react-native-community/cli-types": "^19.1.0",
+    "@react-native-community/cli-types": "^20.0.0",
     "@rock-js/config": "^0.9.2",
     "@types/adm-zip": "^0.5.7"
   },
diff --git a/packages/platform-android/template/android/build.gradle b/packages/platform-android/template/android/build.gradle
@@ -1,9 +1,9 @@
 buildscript {
     ext {
-        buildToolsVersion = "35.0.0"
+        buildToolsVersion = "36.0.0"
         minSdkVersion = 24
-        compileSdkVersion = 35
-        targetSdkVersion = 35
+        compileSdkVersion = 36
+        targetSdkVersion = 36
         ndkVersion = "27.1.12297006"
         kotlinVersion = "2.1.20"
     }
diff --git a/packages/platform-android/template/android/gradle.properties b/packages/platform-android/template/android/gradle.properties
@@ -38,6 +38,11 @@ newArchEnabled=true
 # If set to false, you will be using JSC instead.
 hermesEnabled=true
 
+# Use this property to enable edge-to-edge display support.
+# This allows your app to draw behind system bars for an immersive UI.
+# Note: Only works with ReactActivity and should not be used with custom Activity.
+edgeToEdgeEnabled=true
+
 # Signing configuration – adjust the values and ideally 
 # move the following code to ~/.gradle/gradle.properties to keep it secure
 ROCK_UPLOAD_STORE_FILE=release.keystore
diff --git a/packages/platform-android/template/android/gradle/wrapper/gradle-wrapper.properties b/packages/platform-android/template/android/gradle/wrapper/gradle-wrapper.properties
@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.14.1-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.14.3-bin.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME
diff --git a/packages/platform-apple-helpers/package.json b/packages/platform-apple-helpers/package.json
@@ -17,8 +17,8 @@
     "publish:verdaccio": "npm publish --registry http://localhost:4873 --userconfig ../../.npmrc"
   },
   "dependencies": {
-    "@react-native-community/cli-config": "^19.1.0",
-    "@react-native-community/cli-config-apple": "^19.1.0",
+    "@react-native-community/cli-config": "^20.0.0",
+    "@react-native-community/cli-config-apple": "^20.0.0",
     "@rock-js/tools": "^0.9.2",
     "@types/adm-zip": "^0.5.7",
     "adm-zip": "^0.5.16",
@@ -27,7 +27,7 @@
     "tslib": "^2.3.0"
   },
   "devDependencies": {
-    "@react-native-community/cli-types": "^19.1.0",
+    "@react-native-community/cli-types": "^20.0.0",
     "@rock-js/config": "^0.9.2"
   },
   "publishConfig": {
diff --git a/packages/platform-ios/package.json b/packages/platform-ios/package.json
@@ -19,8 +19,8 @@
     "publish:verdaccio": "npm publish --registry http://localhost:4873 --userconfig ../../.npmrc"
   },
   "dependencies": {
-    "@react-native-community/cli-config-apple": "^19.1.0",
-    "@react-native-community/cli-types": "^19.1.0",
+    "@react-native-community/cli-config-apple": "^20.0.0",
+    "@react-native-community/cli-types": "^20.0.0",
     "@rock-js/platform-apple-helpers": "^0.9.2",
     "@rock-js/tools": "^0.9.2",
     "tslib": "^2.3.0"
diff --git a/packages/platform-ios/template/ios/HelloWorld/Info.plist b/packages/platform-ios/template/ios/HelloWorld/Info.plist
@@ -2,6 +2,8 @@
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
 <dict>
+	<key>CADisableMinimumFrameDurationOnPhone</key>
+	<true/>
 	<key>CFBundleDevelopmentRegion</key>
 	<string>en</string>
 	<key>CFBundleDisplayName</key>
diff --git a/packages/plugin-brownfield-android/package.json b/packages/plugin-brownfield-android/package.json
@@ -21,12 +21,12 @@
   "dependencies": {
     "@rock-js/tools": "^0.9.2",
     "@rock-js/platform-android": "^0.9.2",
-    "@react-native-community/cli-config-android": "^19.1.0",
+    "@react-native-community/cli-config-android": "^20.0.0",
     "tslib": "^2.3.0"
   },
   "devDependencies": {
     "@rock-js/config": "^0.9.2",
-    "@react-native-community/cli-types": "^19.1.0"
+    "@react-native-community/cli-types": "^20.0.0"
   },
   "publishConfig": {
     "access": "restricted"
diff --git a/packages/plugin-brownfield-android/template/android/build.gradle b/packages/plugin-brownfield-android/template/android/build.gradle
@@ -1,9 +1,9 @@
 buildscript {
     ext {
-        buildToolsVersion = "35.0.0"
+        buildToolsVersion = "36.0.0"
         minSdkVersion = 24
-        compileSdkVersion = 35
-        targetSdkVersion = 35
+        compileSdkVersion = 36
+        targetSdkVersion = 36
         ndkVersion = "27.1.12297006"
         kotlinVersion = "2.1.20"
     }
diff --git a/packages/plugin-brownfield-android/template/android/helloworldreact/build.gradle.kts b/packages/plugin-brownfield-android/template/android/helloworldreact/build.gradle.kts
@@ -68,8 +68,8 @@ publishing {
 }
 
 dependencies {
-    api("com.facebook.react:react-android:0.80.1")
-    api("com.facebook.react:hermes-android:0.80.1")
+    api("com.facebook.react:react-android:0.81.1")
+    api("com.facebook.react:hermes-android:0.81.1")
 }
 
 val moduleBuildDir: Directory = layout.buildDirectory.get()
diff --git a/packages/plugin-brownfield-ios/package.json b/packages/plugin-brownfield-ios/package.json
@@ -19,8 +19,8 @@
     "publish:verdaccio": "npm publish --registry http://localhost:4873 --userconfig ../../.npmrc"
   },
   "dependencies": {
-    "@react-native-community/cli-config-apple": "^19.1.0",
-    "@react-native-community/cli-types": "^19.1.0",
+    "@react-native-community/cli-config-apple": "^20.0.0",
+    "@react-native-community/cli-types": "^20.0.0",
     "@rock-js/tools": "^0.9.2",
     "@rock-js/platform-apple-helpers": "^0.9.2",
     "tslib": "^2.3.0"
diff --git a/packages/plugin-metro/package.json b/packages/plugin-metro/package.json
@@ -18,17 +18,17 @@
     "publish:verdaccio": "npm publish --registry http://localhost:4873 --userconfig ../../.npmrc"
   },
   "dependencies": {
-    "@react-native-community/cli-server-api": "^19.1.0",
+    "@react-native-community/cli-server-api": "^20.0.0",
     "@rock-js/tools": "^0.9.2",
-    "metro": "^0.82.2",
-    "metro-config": "^0.82.2",
-    "metro-core": "^0.82.2",
-    "metro-resolver": "^0.82.2",
+    "metro": "^0.83.1",
+    "metro-config": "^0.83.1",
+    "metro-core": "^0.83.1",
+    "metro-resolver": "^0.83.1",
     "tslib": "^2.3.0"
   },
   "devDependencies": {
-    "@react-native/dev-middleware": "^0.80.1",
-    "@react-native/community-cli-plugin": "0.80.1",
+    "@react-native/dev-middleware": "^0.81.1",
+    "@react-native/community-cli-plugin": "0.81.1",
     "@rock-js/config": "^0.9.2"
   },
   "peerDependencies": {
diff --git a/packages/plugin-metro/src/lib/start/OpenDebuggerKeyboardHandler.ts b/packages/plugin-metro/src/lib/start/OpenDebuggerKeyboardHandler.ts
@@ -6,7 +6,7 @@
  */
 
 import { color } from '@rock-js/tools';
-import type { TerminalReporter } from 'metro/src/lib/TerminalReporter';
+import type { TerminalReporter } from 'metro';
 
 type PageDescription = Readonly<{
   id: string;
diff --git a/packages/plugin-metro/src/lib/start/attachKeyHandlers.ts b/packages/plugin-metro/src/lib/start/attachKeyHandlers.ts
@@ -8,7 +8,7 @@
 import readline from 'node:readline';
 import { ReadStream } from 'node:tty';
 import { color, RockError } from '@rock-js/tools';
-import type { TerminalReporter } from 'metro/src/lib/TerminalReporter';
+import type { TerminalReporter } from 'metro';
 import OpenDebuggerKeyboardHandler from './OpenDebuggerKeyboardHandler.js';
 
 const CTRL_C = '\u0003';
diff --git a/packages/plugin-metro/src/lib/start/createDevMiddlewareLogger.ts b/packages/plugin-metro/src/lib/start/createDevMiddlewareLogger.ts
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import type { TerminalReporter } from 'metro/src/lib/TerminalReporter';
+import type { TerminalReporter } from 'metro';
 
 type LoggerFn = (...message: ReadonlyArray<string>) => void;
 
diff --git a/packages/plugin-metro/src/lib/start/loadMetroConfig.ts b/packages/plugin-metro/src/lib/start/loadMetroConfig.ts
@@ -21,7 +21,7 @@ export type ConfigLoadingContext = Readonly<{
 /**
  * Get the config options to override based on RN CLI inputs.
  */
-function getOverrideConfig(
+function getCommunityCliDefaultConfig(
   ctx: ConfigLoadingContext,
   config: ConfigT,
 ): InputConfigT {
@@ -86,6 +86,32 @@ export default async function loadMetroConfig(
   },
   options: YargArguments = {},
 ): Promise<ConfigT> {
+  const require = createRequire(import.meta.url);
+  let RNMetroConfig = null;
+  try {
+    RNMetroConfig = await import(
+      require.resolve('@react-native/metro-config', { paths: [ctx.root] })
+    );
+  } catch {
+    throw new Error(
+      "Cannot resolve `@react-native/metro-config`. Ensure it is listed in your project's `devDependencies`.",
+    );
+  }
+
+  // Get the RN defaults before our customisations
+  const defaultConfig = RNMetroConfig.getDefaultConfig(ctx.root);
+  // Unflag the config as being loaded - it must be loaded again in userland.
+  // @ts-expect-error - overriding global
+  global.__REACT_NATIVE_METRO_CONFIG_LOADED = false;
+
+  // Add our defaults to `@react-native/metro-config` before the user config
+  // loads them.
+  // Available since RN 0.81
+  if (typeof RNMetroConfig.setFrameworkDefaults === 'function') {
+    RNMetroConfig.setFrameworkDefaults(
+      getCommunityCliDefaultConfig(ctx, defaultConfig),
+    );
+  }
   const cwd = ctx.root;
   const projectConfig = await resolveConfig(options.config, cwd);
 
@@ -112,7 +138,12 @@ This warning will be removed in future (https://github.com/facebook/metro/issues
   }
 
   const config = await loadConfig({ cwd, ...options });
-  const overrideConfig = getOverrideConfig(ctx, config);
 
-  return mergeConfig(config, overrideConfig);
+  if (typeof RNMetroConfig.setFrameworkDefaults === 'function') {
+    return config;
+  } else {
+    // Fallback to the old API for RN < 0.81
+    const overrideConfig = getCommunityCliDefaultConfig(ctx, config);
+    return mergeConfig(config, overrideConfig);
+  }
 }
diff --git a/packages/plugin-metro/src/lib/start/runServer.ts b/packages/plugin-metro/src/lib/start/runServer.ts
@@ -10,10 +10,13 @@ import path from 'node:path';
 import url from 'node:url';
 import { createDevServerMiddleware } from '@react-native-community/cli-server-api';
 import { color } from '@rock-js/tools';
+import type {
+  Reporter,
+  // @ts-expect-error - https://github.com/facebook/metro/pull/1563
+  TerminalReportableEvent,
+  TerminalReporter,
+} from 'metro';
 import Metro from 'metro';
-import type { Reporter } from 'metro/src/lib/reporting';
-import type { TerminalReportableEvent } from 'metro/src/lib/TerminalReporter';
-import type { TerminalReporter } from 'metro/src/lib/TerminalReporter';
 import { Terminal } from 'metro-core';
 import { getDevMiddleware } from '../getReactNativeDeps.js';
 import attachKeyHandlers from './attachKeyHandlers.js';
@@ -123,7 +126,6 @@ async function runServer(
       if (reportEvent) {
         reportEvent(event);
       }
-      // @ts-expect-error - metro types are not updated
       if (args.interactive && event.type === 'initialize_done') {
         terminalReporter.update({
           type: 'unstable_server_log',
@@ -142,7 +144,7 @@ async function runServer(
   // @ts-expect-error Assigning to readonly property
   metroConfig.reporter = reporter;
 
-  const serverInstance = await Metro.runServer(metroConfig, {
+  const { httpServer: serverInstance } = await Metro.runServer(metroConfig, {
     host: args.host,
     secure: args.https,
     secureCert: args.cert,
@@ -173,7 +175,12 @@ const require = createRequire(import.meta.url);
 
 function getReporterImpl(customLogReporterPath?: string): TerminalReporter {
   if (customLogReporterPath == null) {
-    return require('metro/src/lib/TerminalReporter');
+    try {
+      return require('metro').TerminalReporter;
+    } catch {
+      // Fallback to legacy path for Metro < 0.83
+      return require('metro/src/lib/TerminalReporter');
+    }
   }
   try {
     // First we let require resolve it, so we can require packages in node_modules
diff --git a/packages/plugin-metro/template/package.json b/packages/plugin-metro/template/package.json
@@ -2,6 +2,6 @@
   "name": "rock-plugin-metro-template",
   "devDependencies": {
     "@rock-js/plugin-metro": "^0.9.2",
-    "@react-native/metro-config": "0.80.1"
+    "@react-native/metro-config": "0.81.1"
   }
 }
diff --git a/packages/welcome-screen/package.json b/packages/welcome-screen/package.json
@@ -24,7 +24,7 @@
   "devDependencies": {
     "@types/react": "^19.1.0",
     "react": "19.1.0",
-    "react-native": "0.80.1"
+    "react-native": "0.81.1"
   },
   "publishConfig": {
     "access": "public"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/templates/rock-template-default/package.json b/templates/rock-template-default/package.json
diff --git a/templates/rock-template-default/tsconfig.json b/templates/rock-template-default/tsconfig.json
diff --git a/website/src/docs/brownfield/android.mdx b/website/src/docs/brownfield/android.mdx
