chore(visionos): add example app using react-native-macos

.github/labeler.yml

@@ -87,6 +87,7 @@
           - packages/app/scripts/template.mjs
           - packages/app/scripts/build/xcodebuild.sh
           - packages/app/visionos/**/*
+          - packages/example-visionos/**/*
 "platform: Windows":
   - changed-files:
       - any-glob-to-any-file:

.github/workflows/build.yml

@@ -346,7 +346,7 @@ jobs:
   macos:
     name: "macOS"
     permissions: {}
-    runs-on: macos-15
+    runs-on: macos-26
     if: ${{ github.event_name != 'schedule' }}
     steps:
       - name: Checkout
@@ -401,7 +401,7 @@ jobs:
   macos-template:
     name: "macOS [template]"
     permissions: {}
-    runs-on: macos-15
+    runs-on: macos-26
     if: ${{ github.event_name != 'schedule' }}
     steps:
       - name: Checkout
@@ -443,8 +443,8 @@ jobs:
   visionos:
     name: "visionOS"
     permissions: {}
-    runs-on: macos-15
-    if: false # visionOS temporarily disabled until releases are resumed
+    runs-on: macos-26
+    if: ${{ github.event_name != 'schedule' }}
     steps:
       - name: Checkout
         uses: actions/checkout@v6
@@ -455,7 +455,7 @@ jobs:
         uses: ./.github/actions/setup-toolchain
         with:
           platform: visionos
-          project-root: packages/app/example
+          project-root: packages/example-visionos
           cache-key-prefix: example
       - name: Set up react-native@nightly
         if: ${{ github.event_name == 'schedule' }}
@@ -469,7 +469,7 @@ jobs:
       - name: Bundle JavaScript
         run: |
           yarn build:visionos
-        working-directory: packages/app/example
+        working-directory: packages/example-visionos
       - name: Determine whether the visionOS app needs to be built
         id: affected
         uses: ./.github/actions/affected
@@ -478,17 +478,17 @@ jobs:
         uses: ./.github/actions/cocoapods
         with:
           project-directory: visionos
-          working-directory: packages/app/example
+          working-directory: packages/example-visionos
       - name: Build
         if: ${{ steps.affected.outputs.visionos != '' }}
         run: |
-          ../../../scripts/xcodebuild.sh visionos/Example.xcworkspace build-for-testing
-        working-directory: packages/app/example
+          ../../scripts/xcodebuild.sh visionos/Example.xcworkspace build-for-testing
+        working-directory: packages/example-visionos
       - name: Test `react-native config`
         if: ${{ steps.affected.outputs.visionos != '' }}
         run: |
           node --test test/config.test.mjs
-        working-directory: packages/app/example
+        working-directory: packages/example-visionos
     timeout-minutes: 60
   visionos-template:
     name: "visionOS [template]"

knip.config.ts

@@ -65,6 +65,9 @@ export default {
       ],
     },
     "packages/example-macos": exampleFor("react-native-macos"),
+    "packages/example-visionos": exampleFor(
+      "@react-native-community/cli-platform-apple"
+    ),
     "packages/example-windows": exampleFor("react-native-windows"),
   },
 };

packages/app/example/react-native.config.js

@@ -11,6 +11,9 @@ const project = (() => {
       macos: {
         sourceDir: "macos",
       },
+      visionos: {
+        sourceDir: "visionos",
+      },
       windows: {
         sourceDir: "windows",
         solutionFile: "windows/Example.sln",

packages/app/example/test/config.test.mjs

@@ -54,7 +54,9 @@ describe("react-native config", async () => {
 
   const shouldSkipIOS = process.platform === "win32";
   const shouldSkipMacOS =
-    shouldSkipIOS || !requiresDependency("react-native-macos", currentDir);
+    shouldSkipIOS ||
+    !requiresDependency("react-native-macos", currentDir) ||
+    !fs.existsSync(`${currentDir}/macos/Podfile`);
   const shouldSkipWindows =
     process.platform !== "win32" ||
     !requiresDependency("react-native-windows", currentDir);

packages/app/test/configure/gatherConfig.test.mts.snapshot

@@ -13,7 +13,7 @@ exports[`gatherConfig() > returns common configuration 1`] = `
     "metro.config.js": {
       "source": "example/metro.config.js"
     },
-    "react-native.config.js": "const project = (() => {\\n  try {\\n    const { configureProjects } = require(\\"react-native-test-app\\");\\n    return configureProjects({\\n      android: {\\n        sourceDir: \\"android\\",\\n      },\\n      ios: {\\n        sourceDir: \\"ios\\",\\n      },\\n      macos: {\\n        sourceDir: \\"macos\\",\\n      },\\n      windows: {\\n        sourceDir: \\"windows\\",\\n        solutionFile: \\"windows/Test.sln\\",\\n      },\\n    });\\n  } catch (_) {\\n    return undefined;\\n  }\\n})();\\n\\nmodule.exports = {\\n  ...(project ? { project } : undefined),\\n};\\n",
+    "react-native.config.js": "const project = (() => {\\n  try {\\n    const { configureProjects } = require(\\"react-native-test-app\\");\\n    return configureProjects({\\n      android: {\\n        sourceDir: \\"android\\",\\n      },\\n      ios: {\\n        sourceDir: \\"ios\\",\\n      },\\n      macos: {\\n        sourceDir: \\"macos\\",\\n      },\\n      visionos: {\\n        sourceDir: \\"visionos\\",\\n      },\\n      windows: {\\n        sourceDir: \\"windows\\",\\n        solutionFile: \\"windows/Test.sln\\",\\n      },\\n    });\\n  } catch (_) {\\n    return undefined;\\n  }\\n})();\\n\\nmodule.exports = {\\n  ...(project ? { project } : undefined),\\n};\\n",
     "common/.gitignore": {
       "source": "example/.gitignore"
     },
@@ -26,7 +26,7 @@ exports[`gatherConfig() > returns common configuration 1`] = `
     "common/metro.config.js": {
       "source": "example/metro.config.js"
     },
-    "common/react-native.config.js": "const project = (() => {\\n  try {\\n    const { configureProjects } = require(\\"react-native-test-app\\");\\n    return configureProjects({\\n      android: {\\n        sourceDir: \\"android\\",\\n      },\\n      ios: {\\n        sourceDir: \\"ios\\",\\n      },\\n      macos: {\\n        sourceDir: \\"macos\\",\\n      },\\n      windows: {\\n        sourceDir: \\"windows\\",\\n        solutionFile: \\"windows/Test.sln\\",\\n      },\\n    });\\n  } catch (_) {\\n    return undefined;\\n  }\\n})();\\n\\nmodule.exports = {\\n  ...(project ? { project } : undefined),\\n};\\n"
+    "common/react-native.config.js": "const project = (() => {\\n  try {\\n    const { configureProjects } = require(\\"react-native-test-app\\");\\n    return configureProjects({\\n      android: {\\n        sourceDir: \\"android\\",\\n      },\\n      ios: {\\n        sourceDir: \\"ios\\",\\n      },\\n      macos: {\\n        sourceDir: \\"macos\\",\\n      },\\n      visionos: {\\n        sourceDir: \\"visionos\\",\\n      },\\n      windows: {\\n        sourceDir: \\"windows\\",\\n        solutionFile: \\"windows/Test.sln\\",\\n      },\\n    });\\n  } catch (_) {\\n    return undefined;\\n  }\\n})();\\n\\nmodule.exports = {\\n  ...(project ? { project } : undefined),\\n};\\n"
   },
   "oldFiles": [],
   "scripts": {
@@ -51,7 +51,7 @@ exports[`gatherConfig() > returns configuration for a single platform 1`] = `
     "metro.config.js": {
       "source": "example/metro.config.js"
     },
-    "react-native.config.js": "const project = (() => {\\n  try {\\n    const { configureProjects } = require(\\"react-native-test-app\\");\\n    return configureProjects({\\n      android: {\\n        sourceDir: \\"android\\",\\n      },\\n      ios: {\\n        sourceDir: \\"ios\\",\\n      },\\n      macos: {\\n        sourceDir: \\"macos\\",\\n      },\\n      windows: {\\n        sourceDir: \\"windows\\",\\n        solutionFile: \\"windows/Test.sln\\",\\n      },\\n    });\\n  } catch (_) {\\n    return undefined;\\n  }\\n})();\\n\\nmodule.exports = {\\n  ...(project ? { project } : undefined),\\n};\\n",
+    "react-native.config.js": "const project = (() => {\\n  try {\\n    const { configureProjects } = require(\\"react-native-test-app\\");\\n    return configureProjects({\\n      android: {\\n        sourceDir: \\"android\\",\\n      },\\n      ios: {\\n        sourceDir: \\"ios\\",\\n      },\\n      macos: {\\n        sourceDir: \\"macos\\",\\n      },\\n      visionos: {\\n        sourceDir: \\"visionos\\",\\n      },\\n      windows: {\\n        sourceDir: \\"windows\\",\\n        solutionFile: \\"windows/Test.sln\\",\\n      },\\n    });\\n  } catch (_) {\\n    return undefined;\\n  }\\n})();\\n\\nmodule.exports = {\\n  ...(project ? { project } : undefined),\\n};\\n",
     "ios/Podfile": "ws_dir = Pathname.new(__dir__)\\nws_dir = ws_dir.parent until\\n  File.exist?(\\"#{ws_dir}/node_modules/react-native-test-app/test_app.rb\\") ||\\n  ws_dir.expand_path.to_s == '/'\\nrequire \\"#{ws_dir}/node_modules/react-native-test-app/test_app.rb\\"\\n\\nworkspace 'Test.xcworkspace'\\n\\nuse_test_app! :hermes_enabled => true, :fabric_enabled => true\\n"
   },
   "oldFiles": [
@@ -84,7 +84,7 @@ exports[`gatherConfig() > returns configuration for all platforms 1`] = `
     "metro.config.js": {
       "source": "example/metro.config.js"
     },
-    "react-native.config.js": "const project = (() => {\\n  try {\\n    const { configureProjects } = require(\\"react-native-test-app\\");\\n    return configureProjects({\\n      android: {\\n        sourceDir: \\"android\\",\\n      },\\n      ios: {\\n        sourceDir: \\"ios\\",\\n      },\\n      macos: {\\n        sourceDir: \\"macos\\",\\n      },\\n      windows: {\\n        sourceDir: \\"windows\\",\\n        solutionFile: \\"windows/Test.sln\\",\\n      },\\n    });\\n  } catch (_) {\\n    return undefined;\\n  }\\n})();\\n\\nmodule.exports = {\\n  ...(project ? { project } : undefined),\\n};\\n",
+    "react-native.config.js": "const project = (() => {\\n  try {\\n    const { configureProjects } = require(\\"react-native-test-app\\");\\n    return configureProjects({\\n      android: {\\n        sourceDir: \\"android\\",\\n      },\\n      ios: {\\n        sourceDir: \\"ios\\",\\n      },\\n      macos: {\\n        sourceDir: \\"macos\\",\\n      },\\n      visionos: {\\n        sourceDir: \\"visionos\\",\\n      },\\n      windows: {\\n        sourceDir: \\"windows\\",\\n        solutionFile: \\"windows/Test.sln\\",\\n      },\\n    });\\n  } catch (_) {\\n    return undefined;\\n  }\\n})();\\n\\nmodule.exports = {\\n  ...(project ? { project } : undefined),\\n};\\n",
     "android/build.gradle": "buildscript {\\n    apply(from: {\\n        def searchDir = rootDir.toPath()\\n        do {\\n            def p = searchDir.resolve(\\"node_modules/react-native-test-app/android/dependencies.gradle\\")\\n            if (p.toFile().exists()) {\\n                return p.toRealPath().toString()\\n            }\\n        } while (searchDir = searchDir.getParent())\\n        throw new GradleException(\\"Could not find \`react-native-test-app\`\\");\\n    }())\\n\\n    repositories {\\n        mavenCentral()\\n        google()\\n    }\\n\\n    dependencies {\\n        getReactNativeDependencies().each { dependency ->\\n            classpath(dependency)\\n        }\\n    }\\n}\\n",
     "android/gradle/wrapper/gradle-wrapper.jar": {
       "source": "example/android/gradle/wrapper/gradle-wrapper.jar"
@@ -152,7 +152,7 @@ exports[`gatherConfig() > returns configuration for arbitrary platforms 1`] = `
     "metro.config.js": {
       "source": "example/metro.config.js"
     },
-    "react-native.config.js": "const project = (() => {\\n  try {\\n    const { configureProjects } = require(\\"react-native-test-app\\");\\n    return configureProjects({\\n      android: {\\n        sourceDir: \\"android\\",\\n      },\\n      ios: {\\n        sourceDir: \\"ios\\",\\n      },\\n      macos: {\\n        sourceDir: \\"macos\\",\\n      },\\n      windows: {\\n        sourceDir: \\"windows\\",\\n        solutionFile: \\"windows/Test.sln\\",\\n      },\\n    });\\n  } catch (_) {\\n    return undefined;\\n  }\\n})();\\n\\nmodule.exports = {\\n  ...(project ? { project } : undefined),\\n};\\n",
+    "react-native.config.js": "const project = (() => {\\n  try {\\n    const { configureProjects } = require(\\"react-native-test-app\\");\\n    return configureProjects({\\n      android: {\\n        sourceDir: \\"android\\",\\n      },\\n      ios: {\\n        sourceDir: \\"ios\\",\\n      },\\n      macos: {\\n        sourceDir: \\"macos\\",\\n      },\\n      visionos: {\\n        sourceDir: \\"visionos\\",\\n      },\\n      windows: {\\n        sourceDir: \\"windows\\",\\n        solutionFile: \\"windows/Test.sln\\",\\n      },\\n    });\\n  } catch (_) {\\n    return undefined;\\n  }\\n})();\\n\\nmodule.exports = {\\n  ...(project ? { project } : undefined),\\n};\\n",
     "android/build.gradle": "buildscript {\\n    apply(from: {\\n        def searchDir = rootDir.toPath()\\n        do {\\n            def p = searchDir.resolve(\\"node_modules/react-native-test-app/android/dependencies.gradle\\")\\n            if (p.toFile().exists()) {\\n                return p.toRealPath().toString()\\n            }\\n        } while (searchDir = searchDir.getParent())\\n        throw new GradleException(\\"Could not find \`react-native-test-app\`\\");\\n    }())\\n\\n    repositories {\\n        mavenCentral()\\n        google()\\n    }\\n\\n    dependencies {\\n        getReactNativeDependencies().each { dependency ->\\n            classpath(dependency)\\n        }\\n    }\\n}\\n",
     "android/gradle/wrapper/gradle-wrapper.jar": {
       "source": "example/android/gradle/wrapper/gradle-wrapper.jar"

packages/example-macos/android/gradle.properties

@@ -51,3 +51,13 @@ reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
 
 # Version of Kotlin to build against.
 #KOTLIN_VERSION=1.8.22
+
+# 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
+
+# Opt out of built-in kotlin and new DSL behavior that ships with AGP 9.
+# Starting from AGP 10.x these opt outs will be removed.
+android.builtInKotlin=false
+android.newDsl=false

packages/example-macos/package.json

@@ -7,12 +7,10 @@
     "build:android": "rnx-cli bundle --platform android",
     "build:ios": "rnx-cli bundle --platform ios",
     "build:macos": "rnx-cli bundle --platform macos",
-    "build:visionos": "rnx-cli bundle --platform ios",
     "ios": "rnx-cli run --platform ios",
     "macos": "rnx-cli run --platform macos",
     "set-react-version": "node ../app/scripts/internal/set-react-version.mts",
-    "start": "rnx-cli start",
-    "visionos": "rnx-cli run --platform visionos"
+    "start": "rnx-cli start"
   },
   "dependencies": {
     "@react-native-webapis/web-storage": "catalog:",
@@ -45,8 +43,7 @@
         "targets": [
           "android",
           "ios",
-          "macos",
-          "visionos"
+          "macos"
         ],
         "platforms": {
           "android": {
@@ -61,10 +58,6 @@
           "macos": {
             "bundleOutput": "dist/main.macos.jsbundle",
             "sourcemapOutput": "dist/main.macos.jsbundle.map"
-          },
-          "visionos": {
-            "bundleOutput": "dist/main.visionos.jsbundle",
-            "sourcemapOutput": "dist/main.visionos.jsbundle.map"
           }
         }
       }

packages/example-visionos/.watchmanconfig

@@ -0,0 +1 @@
+{}

packages/example-visionos/android/build.gradle

@@ -0,0 +1,23 @@
+buildscript {
+    apply(from: {
+        def searchDir = rootDir.toPath()
+        do {
+            def p = searchDir.resolve("node_modules/react-native-test-app/android/dependencies.gradle")
+            if (p.toFile().exists()) {
+                return p.toRealPath().toString()
+            }
+        } while (searchDir = searchDir.getParent())
+        throw new GradleException("Could not find `react-native-test-app`");
+    }())
+
+    repositories {
+        mavenCentral()
+        google()
+    }
+
+    dependencies {
+        getReactNativeDependencies().each { dependency ->
+            classpath(dependency)
+        }
+    }
+}