feat: add visionOS support (#1803)

Co-authored-by: Tommy Nguyen <[email protected]>

Author: Saadnajmi

.github/CODEOWNERS

@@ -12,6 +12,9 @@ ios/                 @Saadnajmi @kelset @tido64
 # macOS
 macos/               @Saadnajmi @kelset @tido64
 
+# visionOS
+visionOS/            @Saadnajmi @kelset @tido64
+
 # Windows
 windows/             @acoates-ms @kelset @tido64
 

.github/actions/affected/action.yml

@@ -14,6 +14,8 @@ outputs:
     value: ${{ steps.affected.outputs.ios }}
   macos:
     value: ${{ steps.affected.outputs.macos }}
+  visionos:
+    value: ${{ steps.affected.outputs.visionos }}
   windows:
     value: ${{ steps.affected.outputs.windows }}
 runs:
@@ -31,7 +33,11 @@ runs:
         if [[ "$affected" = *"macos"* ]]; then
           echo 'macos=true' >> $GITHUB_OUTPUT
         fi
+        if [[ "$affected" = *"visionos"* ]]; then
+          echo 'visionos=true' >> $GITHUB_OUTPUT
+        fi
         if [[ "$affected" = *"windows"* ]]; then
           echo 'windows=true' >> $GITHUB_OUTPUT
         fi
+        echo $affected
       shell: bash

.github/actions/init-test-app/action.yml

@@ -14,7 +14,7 @@ runs:
     - name: Initialize a new app
       run: |
         if [[ ${{ inputs.platform }} == "all" ]]; then
-          yarn init-test-app --destination test-app --name TestApp -p android -p ios -p macos -p windows
+          yarn init-test-app --destination test-app --name TestApp -p android -p ios -p macos -p visionos -p windows
         else
           yarn init-test-app --destination test-app --name TestApp --platform ${{ inputs.platform }}
         fi

.github/actions/setup-react-native/action.yml

@@ -11,5 +11,6 @@ runs:
       run: |
         rm example/ios/Podfile.lock
         rm example/macos/Podfile.lock
+        rm example/visionos/Podfile.lock
         npm run set-react-version -- ${{ inputs.version }}
       shell: bash

.github/labeler.yml

@@ -49,6 +49,23 @@
           - scripts/*.js
           - scripts/xcodebuild.sh
           - test/*.rb
+"platform: visionOS":
+  - changed-files:
+      - any-glob-to-any-file:
+          - .github/actions/cocoapods/*
+          - .github/actions/init-test-app/*
+          - .github/actions/setup-toolchain/*
+          - .github/workflows/build.yml
+          - Gemfile*
+          - ReactTestApp-DevSupport.podspec
+          - common/**/*
+          - example/visionos/**/*
+          - ios/*.rb
+          - ios/ReactTestApp/*.{h,m,mm,swift}
+          - visionos/**/*
+          - scripts/*.js
+          - scripts/xcodebuild.sh
+          - test/*.rb
 "platform: Windows":
   - changed-files:
       - any-glob-to-any-file:

.github/pull_request_template.md

@@ -22,6 +22,7 @@ Resolves #244.
 - [ ] Android
 - [ ] iOS
 - [ ] macOS
+- [ ] visionOS
 - [ ] Windows
 
 ### Test plan

.github/renovate.json

@@ -60,6 +60,7 @@
     {
       "groupName": "react-native",
       "matchPackageNames": [
+        "@callstack/react-native-visionos",
         "@react-native/assets-registry",
         "@react-native/babel-plugin-codegen",
         "@react-native/babel-preset",

.github/workflows/build.yml

@@ -456,6 +456,107 @@ jobs:
           ../scripts/xcodebuild.sh ${{ steps.configure.outputs.project-directory }}/TemplateExample.xcworkspace build
         working-directory: template-example
     timeout-minutes: 60
+  visionos:
+    name: "visionOS"
+    runs-on: macos-14
+    if: ${{ github.event_name != 'schedule' }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          filter: blob:none
+          fetch-depth: 0
+      - name: Set up toolchain
+        uses: ./.github/actions/setup-toolchain
+        with:
+          platform: visionos
+          project-root: example
+          cache-key-prefix: example
+          xcode-developer-dir: /Applications/Xcode_15.2.app
+      - name: Set up react-native@nightly
+        if: ${{ github.event_name == 'schedule' }}
+        uses: ./.github/actions/setup-react-native
+        with:
+          version: nightly
+      - name: Install npm dependencies
+        uses: ./.github/actions/yarn
+        with:
+          immutable: ${{ github.event_name != 'schedule' }}
+      - name: Bundle JavaScript
+        run: |
+          yarn build:visionos || yarn build:visionos
+        working-directory: example
+      - name: Determine whether the visionOS app needs to be built
+        id: affected
+        uses: ./.github/actions/affected
+      - name: Install Pods
+        if: ${{ steps.affected.outputs.visionos != '' }}
+        uses: ./.github/actions/cocoapods
+        with:
+          project-directory: visionos
+          working-directory: example
+      - name: Build
+        if: ${{ steps.affected.outputs.visionos != '' }}
+        run: |
+          ../scripts/xcodebuild.sh visionos/Example.xcworkspace build-for-testing
+        working-directory: example
+      - name: Test `react-native config`
+        if: ${{ steps.affected.outputs.visionos != '' }}
+        run: |
+          node --test test/config.test.mjs
+        working-directory: example
+    timeout-minutes: 60
+  visionos-template:
+    name: "visionOS [template]"
+    strategy:
+      matrix:
+        template: [all, visionos]
+    runs-on: macos-14
+    if: ${{ github.event_name != 'schedule' }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          filter: blob:none
+          fetch-depth: 0
+      - name: Set up toolchain
+        uses: ./.github/actions/setup-toolchain
+        with:
+          platform: visionos
+          project-root: example
+          cache-key-prefix: template-${{ matrix.template }}
+          xcode-developer-dir: /Applications/Xcode_15.2.app
+      - name: Initialize test app
+        uses: ./.github/actions/init-test-app
+        with:
+          platform: ${{ matrix.template }}
+      - name: Bundle JavaScript
+        run: |
+          yarn build:visionos || yarn build:visionos
+        working-directory: template-example
+      - name: Determine whether the visionOS app needs to be built
+        id: affected
+        uses: ./.github/actions/affected
+      - name: Determine project directory
+        id: configure
+        if: ${{ steps.affected.outputs.visionos != '' }}
+        run: |
+          if [[ ${{ matrix.template }} == visionos ]]; then
+            echo 'project-directory=.' >> $GITHUB_OUTPUT
+          else
+            echo 'project-directory=visionos' >> $GITHUB_OUTPUT
+          fi
+      - name: Install Pods
+        if: ${{ steps.affected.outputs.visionos != '' }}
+        run: |
+          pod install --project-directory=${{ steps.configure.outputs.project-directory }}
+        working-directory: template-example
+      - name: Build
+        if: ${{ steps.affected.outputs.visionos != '' }}
+        run: |
+          ../scripts/xcodebuild.sh ${{ steps.configure.outputs.project-directory }}/TemplateExample.xcworkspace build
+        working-directory: template-example
+    timeout-minutes: 60
   windows:
     name: "Windows"
     runs-on: windows-latest

ReactTestApp-DevSupport.podspec

@@ -4,14 +4,14 @@ require 'json'
 #     undefined method `deployment_target' for Pod:Module.
 # But procedures and lambdas work fine.
 deployment_target = lambda do |target_platform|
-  xcodeproj = File.join(__dir__, target_platform, 'ReactTestApp.xcodeproj')
+  xcodeproj = File.join(__dir__, target_platform.to_s, 'ReactTestApp.xcodeproj')
   project = Xcodeproj::Project.open(xcodeproj)
-  setting = case target_platform
-            when 'ios'
-              'IPHONEOS_DEPLOYMENT_TARGET'
-            when 'macos'
-              'MACOSX_DEPLOYMENT_TARGET'
-            end
+  settings = {
+    ios: 'IPHONEOS_DEPLOYMENT_TARGET',
+    macos: 'MACOSX_DEPLOYMENT_TARGET',
+    visionos: 'XROS_DEPLOYMENT_TARGET',
+  }
+  setting = settings[target_platform]
   project.build_configurations[0].resolve_build_setting(setting)
 end
 
@@ -27,8 +27,9 @@ Pod::Spec.new do |s|
   s.source    = { :git => package['repository']['url'], :tag => version }
   s.summary   = package['description']
 
-  s.ios.deployment_target = deployment_target.call('ios')
-  s.osx.deployment_target = deployment_target.call('macos')
+  s.ios.deployment_target = deployment_target.call(:ios)
+  s.osx.deployment_target = deployment_target.call(:macos)
+  s.visionos.deployment_target = deployment_target.call(:visionos)
 
   s.dependency 'React-Core'
   s.dependency 'React-jsi'

example/Example-Tests.podspec

@@ -13,6 +13,7 @@ Pod::Spec.new do |s|
 
   s.ios.deployment_target = '13.0'
   s.osx.deployment_target = '10.15'
+  s.visionos.deployment_target = '1.0'
 
   s.dependency 'React'
   s.dependency 'ReactTestApp-DevSupport'

example/app.json

@@ -26,6 +26,10 @@
       "dist/assets",
       "dist/main.macos.jsbundle"
     ],
+    "visionos": [
+      "dist/assets",
+      "dist/main.visionos.jsbundle"
+    ],
     "windows": [
       "dist/assets",
       "dist/main.windows.bundle"