chore: bump `react-native` to 0.73 (#1764)

.github/actions/setup-toolchain/action.yml

@@ -12,7 +12,7 @@ inputs:
     default: yarn
   java-version:
     description: Desired Java version
-    default: "11"
+    default: "17"
   xcode-developer-dir:
     description: Set the path for the active Xcode developer directory
 runs:

.github/renovate.json

@@ -5,7 +5,7 @@
     {
       "groupName": "@react-native-community/cli",
       "matchPackagePrefixes": ["@react-native-community/cli"],
-      "allowedVersions": "^11.0.0"
+      "allowedVersions": "^12.0.0"
     },
     {
       "groupName": "Android",
@@ -34,7 +34,7 @@
     {
       "groupName": "Metro",
       "matchSourceUrlPrefixes": ["https://github.com/facebook/metro"],
-      "allowedVersions": "^0.76.0"
+      "allowedVersions": "^0.80.0"
     },
     {
       "groupName": "Moshi",
@@ -76,7 +76,7 @@
         "react-native-macos",
         "react-native-windows"
       ],
-      "allowedVersions": "^0.72.0"
+      "allowedVersions": "^0.73.0"
     }
   ],
   "postUpdateOptions": ["yarnDedupeHighest"],

.github/workflows/build.yml

@@ -260,7 +260,6 @@ jobs:
         uses: ./.github/actions/setup-toolchain
         with:
           platform: android
-          java-version: ${{ github.event_name == 'schedule' && '17' || '11' }}
       - name: Set up react-native@nightly
         if: ${{ github.event_name == 'schedule' }}
         uses: ./.github/actions/setup-react-native

example/android/gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-7.6.3-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.4-bin.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME

example/package.json

@@ -19,19 +19,19 @@
   },
   "dependencies": {
     "react": "18.2.0",
-    "react-native": "^0.72.0",
+    "react-native": "^0.73.0",
-    "react-native-macos": "^0.72.0",
+    "react-native-macos": "^0.73.0",
-    "react-native-safe-area-context": "~4.7.4",
+    "react-native-safe-area-context": "~4.8.2",
-    "react-native-windows": "^0.72.0"
+    "react-native-windows": "^0.73.0"
   },
   "devDependencies": {
     "@babel/core": "^7.1.6",
     "@babel/preset-env": "^7.1.6",
-    "@react-native/metro-config": "^0.72.11",
+    "@react-native/babel-preset": "^0.73.19",
+    "@react-native/metro-config": "^0.73.3",
     "@rnx-kit/metro-config": "^1.3.14",
     "@types/react": "~18.2.0",
     "appium": "^2.0.0",
-    "metro-react-native-babel-preset": "^0.76.8",
     "react-native-test-app": "workspace:*",
     "webdriverio": "^8.11.2"
   },

example/test/config.test.mjs

@@ -5,7 +5,7 @@ import * as os from "node:os";
 import * as path from "node:path";
 import { after, before, test } from "node:test";
 import { fileURLToPath } from "node:url";
-import { findNearest } from "../../scripts/helpers.js";
+import { findNearest, readJSONFile } from "../../scripts/helpers.js";
 
 function getCliVersion() {
   const cli = findNearest(
@@ -15,7 +15,13 @@ function getCliVersion() {
     throw new Error("Could not find '@react-native-community/cli'");
   }
 
-  const { version } = JSON.parse(fs.readFileSync(cli, { encoding: "utf-8" }));
+  const { version } = readJSONFile(cli);
+  if (typeof version !== "string") {
+    throw new Error(
+      `Invalid version string for '@react-native-community/cli': ${version}`
+    );
+  }
+
   return version;
 }
 

example/test/specs/wdio.config.js

@@ -32,7 +32,7 @@ exports.config = {
           platformName: "iOS",
           "appium:app": "com.microsoft.ReactTestApp",
           "appium:deviceName": "iPhone 15 Pro",
-          "appium:platformVersion": "17.0",
+          "appium:platformVersion": "17.2",
           "appium:automationName": "XCUITest",
           ...features,
         };

package.json

@@ -113,7 +113,7 @@
     "@eslint/js": "^8.0.0",
     "@expo/config-plugins": "^7.0.0",
     "@microsoft/eslint-plugin-sdl": "^0.2.0",
-    "@react-native-community/cli": "^11.3.6",
+    "@react-native-community/cli": "^12.3.0",
     "@rnx-kit/eslint-plugin": "^0.6.0",
     "@rnx-kit/tsconfig": "^1.0.0",
     "@types/js-yaml": "^4.0.5",
@@ -129,9 +129,9 @@
     "minimatch": "^9.0.0",
     "prettier": "^3.0.0",
     "react": "18.2.0",
-    "react-native": "^0.72.0",
+    "react-native": "^0.73.0",
-    "react-native-macos": "^0.72.0",
+    "react-native-macos": "^0.73.0",
-    "react-native-windows": "^0.72.0",
+    "react-native-windows": "^0.73.0",
     "semantic-release": "^22.0.0",
     "suggestion-bot": "^2.0.0",
     "typescript": "^5.0.0"
@@ -142,22 +142,19 @@
   "packageManager": "yarn@4.0.2",
   "resolutions": {
     "@appium/docutils": "link:./example",
-    "@appium/support/@types/semver": "^7.5.5",
+    "@appium/support/@types/semver": "^7.5.6",
     "@expo/config-plugins/glob": "^7.1.6",
     "@expo/json-file/@babel/code-frame": "^7.10.4",
     "@microsoft/eslint-plugin-sdl/eslint-plugin-react": "^7.33.0",
     "@pnpm/network.ca-file/graceful-fs": "~4.2.10",
-    "@react-native-community/cli": "^11.3.6",
+    "@react-native-community/cli": "^12.3.0",
-    "@react-native-community/cli-platform-android": "^11.3.6",
+    "@react-native-community/cli-platform-android": "^12.3.0",
-    "@react-native-community/cli-platform-ios": "^11.3.6",
+    "@react-native-community/cli-platform-ios": "^12.3.0",
     "@semantic-release/npm/npm": "link:./example",
-    "appium/@types/semver": "^7.5.5",
+    "appium/@types/semver": "^7.5.6",
     "appium/yaml": "^2.3.4",
     "body-parser": "~1.20.2",
     "bplist-parser": "~0.3.2",
-    "deprecated-react-native-prop-types": "^4.2.3",
-    "deprecated-react-native-prop-types/@react-native/normalize-colors": "^0.72.0",
-    "react-native-windows/metro-source-map": "^0.76.8",
     "safe-buffer": "~5.2.1"
   },
   "workspaces": [

scripts/android-nightly.patch

@@ -11,15 +11,3 @@ index 2577d91..bf833ad 100644
  # Jetifier randomly fails on these libraries
  android.jetifier.ignorelist=hermes-android
  
-diff --git a/example/android/gradle/wrapper/gradle-wrapper.properties b/example/android/gradle/wrapper/gradle-wrapper.properties
-index 878fe04..3fa8f86 100644
---- a/example/android/gradle/wrapper/gradle-wrapper.properties
-+++ b/example/android/gradle/wrapper/gradle-wrapper.properties
-@@ -1,6 +1,6 @@
- distributionBase=GRADLE_USER_HOME
- distributionPath=wrapper/dists
--distributionUrl=https\://services.gradle.org/distributions/gradle-7.6.3-bin.zip
-+distributionUrl=https\://services.gradle.org/distributions/gradle-8.4-bin.zip
- networkTimeout=10000
- validateDistributionUrl=true
- zipStoreBase=GRADLE_USER_HOME

scripts/configure.js

@@ -13,6 +13,7 @@ const {
   findNearest,
   getPackageVersion,
   readJSONFile,
+  readTextFile,
   toVersionNumber,
   v,
 } = require("./helpers");
@@ -351,7 +352,7 @@ function reactNativeConfig({ name, testAppPath, platforms, flatten }) {
   }
 
   const config = path.join(testAppPath, "example", "react-native.config.js");
-  return fs.readFileSync(config, utf8).replace(/Example/g, name);
+  return readTextFile(config, fs).replace(/Example/g, name);
 }
 
 /**

scripts/disable-safe-area-context.patch

@@ -34,14 +34,14 @@ index 35fea8c..56c1c0c 100644
    );
  }
 diff --git a/example/package.json b/example/package.json
-index 4bcbc7a..b6adc1e 100644
+index fe0f522..7fb0f7e 100644
 --- a/example/package.json
 +++ b/example/package.json
 @@ -21,7 +21,6 @@
      "react": "18.2.0",
-     "react-native": "^0.72.0",
+     "react-native": "^0.73.0",
-     "react-native-macos": "^0.72.0",
+     "react-native-macos": "^0.73.0",
--    "react-native-safe-area-context": "~4.7.4",
+-    "react-native-safe-area-context": "~4.8.2",
-     "react-native-windows": "^0.72.0"
+     "react-native-windows": "^0.73.0"
    },
    "devDependencies": {

scripts/helpers.js

@@ -31,6 +31,15 @@ function findNearest(
   return null;
 }
 
+/**
+ * Reads text file at specified path.
+ * @param {import("node:fs").PathLike} path
+ * @returns {string}
+ */
+function readTextFile(path, fs = require("node:fs")) {
+  return fs.readFileSync(path, { encoding: "utf-8" });
+}
+
 /**
  * Reads and parses JSON file at specified path.
  * @template [T = Record<string, unknown>]
@@ -38,7 +47,7 @@ function findNearest(
  * @returns {T}
  */
 function readJSONFile(path, fs = require("node:fs")) {
-  return JSON.parse(fs.readFileSync(path, { encoding: "utf-8" }));
+  return JSON.parse(readTextFile(path, fs));
 }
 
 /**
@@ -100,6 +109,7 @@ function v(major, minor, patch) {
 exports.findNearest = findNearest;
 exports.getPackageVersion = getPackageVersion;
 exports.readJSONFile = readJSONFile;
+exports.readTextFile = readTextFile;
 exports.requireTransitive = requireTransitive;
 exports.toVersionNumber = toVersionNumber;
 exports.v = v;

scripts/test-e2e.mjs

@@ -1,6 +1,10 @@
 #!/usr/bin/env node
 // @ts-check
 
+/**
+ * Reminder that this script is meant to be runnable without installing
+ * dependencies. It can therefore not rely on any external libraries.
+ */
 import { spawnSync } from "node:child_process";
 import { Socket } from "node:net";
 

scripts/test-matrix.mjs

@@ -8,7 +8,7 @@
 import { spawn, spawnSync } from "node:child_process";
 import * as fs from "node:fs";
 import * as os from "node:os";
-import { toVersionNumber, v } from "./helpers.js";
+import { readTextFile, toVersionNumber, v } from "./helpers.js";
 import { setReactVersion } from "./set-react-version.mjs";
 import { $, test } from "./test-e2e.mjs";
 
@@ -85,7 +85,7 @@ function configure(platform, { hermes, newArch }) {
       // Hermes is always enabled on Android
       if (newArch) {
         const properties = "android/gradle.properties";
-        const content = fs.readFileSync(properties, { encoding: "utf-8" });
+        const content = readTextFile(properties);
         fs.writeFileSync(
           properties,
           content.replace("#newArchEnabled=true", "newArchEnabled=true")
@@ -94,7 +94,7 @@ function configure(platform, { hermes, newArch }) {
       break;
     case "ios": {
       const podfile = `${platform}/Podfile`;
-      let content = fs.readFileSync(podfile, { encoding: "utf-8" });
+      let content = readTextFile(podfile);
       if (hermes) {
         content = content.replace(
           ":hermes_enabled => false",
@@ -187,9 +187,17 @@ async function withReactNativeVersion(version, proc) {
   );
 
   if (version) {
-    if (toVersionNumber(version) >= v(0, 73, 0)) {
+    $("git", "apply", "scripts/disable-safe-area-context.patch");
+    if (toVersionNumber(version) >= v(0, 74, 0)) {
       $("git", "apply", "scripts/android-nightly.patch");
-      $("git", "apply", "scripts/disable-safe-area-context.patch");
+    } else if (toVersionNumber(version) < v(0, 73, 0)) {
+      const gradleWrapperProperties =
+        "example/android/gradle/wrapper/gradle-wrapper.properties";
+      const props = readTextFile(gradleWrapperProperties);
+      fs.writeFileSync(
+        gradleWrapperProperties,
+        props.replace(/gradle-[.0-9]*-bin\.zip/, "gradle-7.6.3-bin.zip")
+      );
     }
     await setReactVersion(version, true);
   }

scripts/validate-manifest.js

@@ -3,7 +3,7 @@
 "use strict";
 
 const path = require("node:path");
-const { readJSONFile } = require("./helpers");
+const { readJSONFile, readTextFile } = require("./helpers");
 const { generateSchema } = require("./schema");
 
 const APP_JSON = "app.json";
@@ -138,7 +138,7 @@ function validate(
 
     if (
       !fs.existsSync(manifestCopyDest) ||
-      cppHeader !== fs.readFileSync(manifestCopyDest, { encoding: "utf-8" })
+      cppHeader !== readTextFile(manifestCopyDest, fs)
     ) {
       const options = { recursive: true, mode: 0o755 };
       fs.mkdirSync(path.dirname(manifestCopyDest), options);

test/android-test-app/gradle.mjs

@@ -7,7 +7,7 @@ import * as os from "node:os";
 import * as path from "node:path";
 import { fileURLToPath } from "node:url";
 import { gatherConfig, writeAllFiles } from "../../scripts/configure.js";
-import { findNearest } from "../../scripts/helpers.js";
+import { findNearest, readJSONFile } from "../../scripts/helpers.js";
 
 /**
  * Joins the strings if an array is passed, otherwise returns the string.
@@ -77,8 +77,11 @@ export function reactNativeVersion() {
     throw new Error("Cannot find module 'react-native'");
   }
 
-  const manifest = fs.readFileSync(rnPath, { encoding: "utf-8" });
+  const { version } = readJSONFile(rnPath);
-  const { version } = JSON.parse(manifest);
+  if (typeof version !== "string") {
+    throw new Error(`Invalid version string for 'react-native': ${version}`);
+  }
+
   return version;
 }
 

test/configure/writeAllFiles.test.mjs

@@ -3,9 +3,13 @@ import { equal, rejects, throws } from "node:assert/strict";
 import * as path from "node:path";
 import { afterEach, describe, it } from "node:test";
 import { writeAllFiles as writeAllFilesActual } from "../../scripts/configure.js";
+import { readTextFile as readTextFileActual } from "../../scripts/helpers.js";
 import { fs, setMockFiles } from "../fs.mock.mjs";
 
 describe("writeAllFiles()", () => {
+  /** @type {typeof readTextFileActual} */
+  const readTextFile = (p) => readTextFileActual(p, fs);
+
   /** @type {typeof writeAllFilesActual} */
   const writeAllFiles = (files, dest) =>
     writeAllFilesActual(files, dest, fs.promises);
@@ -23,9 +27,9 @@ describe("writeAllFiles()", () => {
       "test"
     );
 
-    equal(fs.readFileSync(path.join("test", "file0"), "utf-8"), "0");
+    equal(readTextFile(path.join("test", "file0")), "0");
-    equal(fs.readFileSync(path.join("test", "file1"), "utf-8"), "1");
+    equal(readTextFile(path.join("test", "file1")), "1");
-    equal(fs.readFileSync(path.join("test", "file2"), "utf-8"), "2");
+    equal(readTextFile(path.join("test", "file2")), "2");
   });
 
   it("ignores files with no content", async () => {
@@ -38,9 +42,9 @@ describe("writeAllFiles()", () => {
       "."
     );
 
-    equal(fs.readFileSync("file1", "utf-8"), "1");
+    equal(readTextFile("file1"), "1");
-    equal(fs.readFileSync("file2", "utf-8"), "2");
+    equal(readTextFile("file2"), "2");
-    throws(() => fs.readFileSync("file3"), "ENOENT");
+    throws(() => readTextFile("file3"), "ENOENT");
   });
 
   it("rethrows write exceptions", async () => {
@@ -69,8 +73,8 @@ describe("writeAllFiles()", () => {
       )
     );
 
-    equal(fs.readFileSync("file1", "utf-8"), "1");
+    equal(readTextFile("file1"), "1");
-    equal(fs.readFileSync("file2", "utf-8"), "2");
+    equal(readTextFile("file2"), "2");
-    throws(() => fs.readFileSync(""), "EISDIR");
+    throws(() => readTextFile(""), "EISDIR");
   });
 });

test/windows-test-app/copyAndReplace.test.mjs

@@ -2,6 +2,7 @@
 import { equal, fail, match, rejects } from "node:assert/strict";
 import { afterEach, describe, it } from "node:test";
 import { promisify } from "node:util";
+import { readTextFile as readTextFileActual } from "../../scripts/helpers.js";
 import { copyAndReplace as copyAndReplaceActual } from "../../windows/test-app.js";
 import { fs, setMockFiles } from "../fs.mock.mjs";
 import { spy } from "../spy.mjs";
@@ -13,6 +14,9 @@ describe("copyAndReplace()", () => {
 
   const copyAndReplaceAsync = promisify(copyAndReplace);
 
+  /** @type {typeof readTextFileActual} */
+  const readTextFile = (p) => readTextFileActual(p, fs);
+
   afterEach(() => setMockFiles());
 
   it("copies files if no modifications are needed", async (t) => {
@@ -29,10 +33,7 @@ describe("copyAndReplace()", () => {
     );
 
     equal(spy(fs.copyFile).calls.length, 1);
-    equal(
+    equal(readTextFile("test/ReactTestApp.png"), "binary");
-      fs.readFileSync("test/ReactTestApp.png", { encoding: "utf-8" }),
-      "binary"
-    );
   });
 
   it("replaces file content", async (t) => {
@@ -47,10 +48,7 @@ describe("copyAndReplace()", () => {
     });
 
     equal(spy(fs.copyFile).calls.length, 0);
-    equal(
+    equal(readTextFile("test/ReactTestApp.png"), "text");
-      fs.readFileSync("test/ReactTestApp.png", { encoding: "utf-8" }),
-      "text"
-    );
   });
 
   it("throws on error", async () => {

windows/test-app.js

@@ -9,6 +9,7 @@ const {
   findNearest,
   getPackageVersion,
   readJSONFile,
+  readTextFile,
   requireTransitive,
   toVersionNumber,
   v,
@@ -54,9 +55,6 @@ const uniqueFilterIdentifier = "e48dc53e-40b1-40cb-970a-f89935452892";
 /** @type {{ recursive: true, mode: 0o755 }} */
 const mkdirRecursiveOptions = { recursive: true, mode: 0o755 };
 
-/** @type {{ encoding: "utf-8" }} */
-const textFileReadOptions = { encoding: "utf-8" };
-
 /** @type {{ encoding: "utf-8", mode: 0o644 }} */
 const textFileWriteOptions = { encoding: "utf-8", mode: 0o644 };
 
@@ -95,7 +93,7 @@ function findUserProjects(projectDir, projects = []) {
         findUserProjects(fullPath, projects);
       }
     } else if (fullPath.endsWith(".vcxproj")) {
-      const vcxproj = fs.readFileSync(fullPath, textFileReadOptions);
+      const vcxproj = readTextFile(fullPath, fs);
       const guidMatch = vcxproj.match(
         /<ProjectGuid>({[0-9A-F]{8}-[0-9A-F]{4}-[0-9A-F]{4}-[0-9A-F]{4}-[0-9A-F]{12}})<\/ProjectGuid>/
       );
@@ -180,7 +178,7 @@ function getNuGetDependencies(rnWindowsPath) {
     //     </Project>
     //
     for (const vcxproj of projects) {
-      const proj = xml.parse(fs.readFileSync(vcxproj, textFileReadOptions));
+      const proj = xml.parse(readTextFile(vcxproj, fs));
       const itemGroup = proj.project?.itemgroup;
       if (!itemGroup) {
         continue;
@@ -213,9 +211,7 @@ function getNuGetDependencies(rnWindowsPath) {
 
   // Remove dependencies managed by us
   const config = path.join(__dirname, "ReactTestApp", "packages.config");
-  const matches = fs
+  const matches = readTextFile(config, fs).matchAll(/package id="(.+?)"/g);
-    .readFileSync(config, textFileReadOptions)
-    .matchAll(/package id="(.+?)"/g);
   for (const m of matches) {
     const id = m[1].toLowerCase();
     delete packageRefs[id];
@@ -496,7 +492,7 @@ function copyAndReplace(
     fs.copyFile(srcPath, destPath, callback);
   } else {
     // Treat as text file
-    fs.readFile(srcPath, textFileReadOptions, (err, data) => {
+    fs.readFile(srcPath, { encoding: "utf-8" }, (err, data) => {
       if (err) {
         callback(err);
         return;
@@ -587,7 +583,7 @@ function getHermesVersion(rnwPath, fs = require("node:fs")) {
     "PropertySheets",
     "JSEngine.props"
   );
-  const props = fs.readFileSync(jsEnginePropsPath, textFileReadOptions);
+  const props = readTextFile(jsEnginePropsPath, fs);
   const m = props.match(/<HermesVersion.*?>(.+?)<\/HermesVersion>/);
   return m && m[1];
 }
@@ -784,7 +780,7 @@ function generateSolution(
   const solutionTask = fs.writeFile(
     path.join(destPath, `${appName}.sln`),
     mustache
-      .render(fs.readFileSync(solutionTemplatePath, textFileReadOptions), {
+      .render(readTextFile(solutionTemplatePath, fs), {
         ...templateView,
         useExperimentalNuget: useNuGet,
       })
@@ -901,10 +897,7 @@ function generateSolution(
     if (nugetConfigPath && !fs.existsSync(nugetConfigDestPath)) {
       fs.writeFile(
         nugetConfigDestPath,
-        mustache.render(
+        mustache.render(readTextFile(nugetConfigPath, fs), {}),
-          fs.readFileSync(nugetConfigPath, textFileReadOptions),
-          {}
-        ),
         textFileWriteOptions,
         rethrow
       );