Upgrade ERN to support RN 0.81

azure/templates/system-tests.yml

@@ -1,7 +1,7 @@
 steps:
   - task: NodeTool@0
     inputs:
-      versionSpec: '18.x'
+      versionSpec: '20.x'
     displayName: 'Install Node.js'
   - script: |
       git config --global user.email "electrodenative@gmail.com"

azure/templates/unit-tests.yml

@@ -1,7 +1,7 @@
 steps:
   - task: NodeTool@0
     inputs:
-      versionSpec: '18.x'
+      versionSpec: '20.x'
     displayName: 'Install Node.js'
   - script: |
       yarn --frozen-lockfile

ern-composite-gen/src/addRNDepToPjson.ts

@@ -7,7 +7,21 @@ export async function addRNDepToPjson(dir: string, version: string) {
 
   // For React Native 0.77+, also add required dependencies
   // This is required by the new Metro config format and CLI
-  if (semver.gte(version, '0.77.0')) {
+  if (semver.gte(version, '0.81.0')) {
+    compositePackageJson.dependencies['@react-native/metro-config'] = version;
+    compositePackageJson.dependencies['@react-native/babel-preset'] = version;
+    // RN 0.81+ uses @react-native/community-cli-plugin (internal to RN monorepo)
+    compositePackageJson.dependencies['@react-native/community-cli-plugin'] =
+      version;
+    // Add CLI packages to ensure android and ios platforms are available
+    compositePackageJson.dependencies['@react-native-community/cli'] = '15.1.3';
+    compositePackageJson.dependencies[
+      '@react-native-community/cli-platform-android'
+    ] = '15.1.3';
+    compositePackageJson.dependencies[
+      '@react-native-community/cli-platform-ios'
+    ] = '15.1.3';
+  } else if (semver.gte(version, '0.77.0')) {
     compositePackageJson.dependencies['@react-native/metro-config'] = version;
     compositePackageJson.dependencies['@react-native/babel-preset'] = version;
     // Add CLI packages to ensure android and ios platforms are available

ern-composite-gen/src/createMetroConfig.ts

@@ -2,22 +2,61 @@ import fs from 'fs-extra';
 import path from 'path';
 import beautify from 'js-beautify';
 import os from 'os';
+import semver from 'semver';
+import { getMetroBlacklistPath } from 'ern-core';
 
 export async function createMetroConfig({
   cwd,
   projectRoot,
   blacklistRe,
   extraNodeModules,
   watchFolders,
+  reactNativeVersion,
 }: {
   cwd?: string;
   projectRoot?: string;
   blacklistRe?: RegExp[];
   extraNodeModules?: { [pkg: string]: string };
   watchFolders?: string[];
+  reactNativeVersion?: string;
 }) {
-  // Metro config format for React Native 0.73+
-  const metroConfigContent = `const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
+  const useModernConfig =
+    reactNativeVersion && semver.gte(reactNativeVersion, '0.73.0');
+
+  const metroConfigContent = useModernConfig
+    ? createModernMetroConfig({
+        projectRoot,
+        blacklistRe,
+        extraNodeModules,
+        watchFolders,
+      })
+    : createLegacyMetroConfig({
+        projectRoot,
+        blacklistRe,
+        extraNodeModules,
+        watchFolders,
+        reactNativeVersion: reactNativeVersion || '0.60.0',
+      });
+
+  return fs.writeFile(
+    path.join(cwd ?? path.resolve(), 'metro.config.js'),
+    beautify.js(metroConfigContent),
+  );
+}
+
+// Metro config format for React Native 0.73+
+function createModernMetroConfig({
+  projectRoot,
+  blacklistRe,
+  extraNodeModules,
+  watchFolders,
+}: {
+  projectRoot?: string;
+  blacklistRe?: RegExp[];
+  extraNodeModules?: { [pkg: string]: string };
+  watchFolders?: string[];
+}): string {
+  return `const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
 const defaultConfig = getDefaultConfig(__dirname);
 
 const config = {
@@ -45,7 +84,7 @@ const config = {
     ],
     sourceExts: [
       ...defaultConfig.resolver.sourceExts,
-      "svg", 
+      "svg",
       "mjs"
     ],
     blockList: [
@@ -72,9 +111,95 @@ const config = {
 };
 
 module.exports = mergeConfig(defaultConfig, config);`;
+}
 
-  return fs.writeFile(
-    path.join(cwd ?? path.resolve(), 'metro.config.js'),
-    beautify.js(metroConfigContent),
-  );
+// Legacy Metro config format for React Native < 0.73
+function createLegacyMetroConfig({
+  projectRoot,
+  blacklistRe,
+  extraNodeModules,
+  watchFolders,
+  reactNativeVersion,
+}: {
+  projectRoot?: string;
+  blacklistRe?: RegExp[];
+  extraNodeModules?: { [pkg: string]: string };
+  watchFolders?: string[];
+  reactNativeVersion: string;
+}): string {
+  return `const blacklist = require('${getMetroBlacklistPath(
+    reactNativeVersion,
+  )}');
+module.exports = {
+  ${projectRoot ? `projectRoot: "${projectRoot}",` : ''}
+  ${
+    watchFolders
+      ? `watchFolders: [
+        ${watchFolders
+          .map((x) => `"${x.replace(/\\/g, '\\\\')}"`)
+          .join(`,${os.EOL}`)}
+      ],`
+      : ''
+  }
+  resolver: {
+    blacklistRE: blacklist([
+      // Ignore IntelliJ directories
+      /.*\\.idea\\/.*/,
+      // ignore git directories
+      /.*\\.git\\/.*/,
+      // Ignore android directories
+      /.*\\/app\\/build\\/.*/,
+      ${blacklistRe ? blacklistRe.join(`,${os.EOL}`) : ''}
+    ]),
+    ${
+      extraNodeModules
+        ? `extraNodeModules: ${JSON.stringify(extraNodeModules, null, 2)},`
+        : ''
+    }
+    assetExts: [
+      // Image formats
+      "bmp",
+      "gif",
+      "jpg",
+      "jpeg",
+      "png",
+      "psd",
+      "webp",
+      // Video formats
+      "m4v",
+      "mov",
+      "mp4",
+      "mpeg",
+      "mpg",
+      "webm",
+      // Audio formats
+      "aac",
+      "aiff",
+      "caf",
+      "m4a",
+      "mp3",
+      "wav",
+      // Document formats
+      "html",
+      "pdf",
+      // Font formats
+      "otf",
+      "ttf",
+      // Archives (virtual files)
+      "zip"
+    ],
+    sourceExts: ["js", "json", "ts", "tsx", "svg", "mjs"],
+  },
+  transformer: {
+    getTransformOptions: async () => ({
+      transform: {
+        experimentalImportSupport: false,
+        inlineRequires: false,
+      },
+    }),
+    assetPlugins: ['ern-bundle-store-metro-asset-plugin'],
+    babelTransformerPath: require.resolve("react-native-svg-transformer"),
+  },
+};
+`;
 }

ern-composite-gen/src/generateComposite.ts

@@ -330,6 +330,7 @@ You should resolve the following version mismatches prior to retrying.${os.EOL}`
       blacklistRe,
       cwd: outDir,
       extraNodeModules,
+      reactNativeVersion: rnVersion,
       watchFolders: localMiniAppsPaths,
     });
     if (semver.gte(rnVersion, '0.57.0')) {

ern-container-gen-android/src/AndroidGenerator.ts

@@ -388,7 +388,12 @@ You should replace "${annotationProcessorPrefix}:${dependency}" with "annotation
     log.debug('Patching hull');
     const files = readDir(
       config.outDir,
-      (f) => !f.endsWith('.jar') && !f.endsWith('.aar') && !f.endsWith('.git'),
+      (f) =>
+        !f.endsWith('.jar') &&
+        !f.endsWith('.aar') &&
+        !f.endsWith('.git') &&
+        f !== '.gradle' &&
+        f !== 'build',
     );
     const pathLibSrcMain = path.normalize('lib/src/main');
     const pathLibSrcMainJniLibs = path.normalize('lib/src/main/jniLibs');

ern-container-gen-android/src/hull/build.gradle

@@ -5,9 +5,7 @@ buildscript {
     }
     dependencies {
         classpath 'com.android.tools.build:gradle:{{{androidGradlePlugin}}}'
-{{#isKotlinEnabled}}
         classpath 'org.jetbrains.kotlin:kotlin-gradle-plugin:{{{kotlinVersion}}}'
-{{/isKotlinEnabled}}
     }
 }
 

ern-container-gen-android/src/hull/gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.11.1-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.14.3-all.zip
 networkTimeout=10000
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists

ern-container-gen-android/src/hull/lib/build.gradle

@@ -1,7 +1,5 @@
 apply plugin: 'com.android.library'
-{{#isKotlinEnabled}}
 apply plugin: 'kotlin-android'
-{{/isKotlinEnabled}}
 
 android {
     namespace "com.walmartlabs.ern.container"

ern-container-gen/src/reactNativeBundleAndroid.ts

@@ -43,6 +43,7 @@ export async function reactNativeBundleAndroid({
       platform: 'android',
       resetCache,
       sourceMapOutput,
+      workingDir: cwd,
     });
     return result;
   } finally {

ern-container-gen/src/reactNativeBundleIos.ts

@@ -56,6 +56,7 @@ export async function reactNativeBundleIos({
       platform: 'ios',
       resetCache,
       sourceMapOutput,
+      workingDir: cwd,
     });
     return result;
   } finally {