example: add visionos

Author: krizzu

examples/react-native/app.json

@@ -11,6 +11,7 @@
     "android": ["dist/res", "dist/main.android.jsbundle"],
     "ios": ["dist/assets", "dist/main.ios.jsbundle"],
     "macos": ["dist/assets", "dist/main.macos.jsbundle"],
+    "visionos": ["dist/assets", "dist/main.visionos.jsbundle"],
     "windows": ["dist/assets", "dist/main.windows.bundle"]
   }
 }

examples/react-native/metro.config.js

@@ -1,5 +1,12 @@
 const { makeMetroConfig } = require("@rnx-kit/metro-config");
+const { getPlatformResolver } = require("@callstack/out-of-tree-platforms");
+
 module.exports = makeMetroConfig({
+  resolver: {
+    resolveRequest: getPlatformResolver({
+      platformNameMap: { visionos: "@callstack/react-native-visionos" },
+    }),
+  },
   transformer: {
     getTransformOptions: async () => ({
       transform: {

examples/react-native/package.json

@@ -7,10 +7,12 @@
     "ios": "react-native run-ios",
     "windows": "install-windows-test-app && react-native run-windows",
     "macos": "react-native run-macos",
+    "visionos": "react-native run-visionos",
     "bundle:android": "yarn mkdist && react-native bundle --entry-file index.js --platform android --dev true --bundle-output dist/main.android.jsbundle --assets-dest dist/res",
     "bundle:ios": "yarn mkdist && react-native bundle --entry-file index.js --platform ios --dev true --bundle-output dist/main.ios.jsbundle --assets-dest dist",
     "bundle:windows": "yarn mkdist && react-native bundle --entry-file index.js --platform windows --dev true --bundle-output dist/main.windows.bundle --assets-dest dist",
     "bundle:macos": "yarn mkdist && react-native bundle --entry-file index.js --platform macos --dev true --bundle-output dist/main.macos.bundle --assets-dest dist",
+    "bundle:visionos": "yarn mkdist && react-native bundle --entry-file index.js --platform ios --dev true --bundle-output dist/main.visionos.bundle --assets-dest dist",
     "test:lint": "eslint .",
     "test:ts": "tsc --noEmit",
     "mkdist": "node -e \"require('node:fs').mkdirSync('dist', { recursive: true, mode: 0o755 })\"",
@@ -20,6 +22,7 @@
     "hoistingLimits": "workspaces"
   },
   "dependencies": {
+    "@callstack/react-native-visionos": "^0.79.0",
     "react": "19.0.0",
     "react-native": "0.79.6",
     "react-native-macos": "^0.79.0",
@@ -30,6 +33,7 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.3",
     "@babel/runtime": "^7.25.0",
+    "@callstack/out-of-tree-platforms": "^0.77.0",
     "@react-native-async-storage/async-storage": "workspace:*",
     "@react-native-async-storage/eslint-config": "workspace:*",
     "@react-native-community/cli": "18.0.0",

examples/react-native/react-native.config.js

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

examples/react-native/src/App.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { StatusBar, useColorScheme, View } from "react-native";
+import { StatusBar, useColorScheme, View, Text, Platform } from "react-native";
 import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
 import { TabButton } from "./components/TabButton";
 import BasicTests from "./tests/BasicTests";
@@ -11,10 +11,23 @@ function App(): React.JSX.Element {
     "basic" | "legacy-basic" | "perf" | "legacy-perf"
   >("basic");
 
+  function getPlatform() {
+    switch (Platform.OS) {
+      case "ios": {
+        return Platform.isVision ? "visionOS" : "iOS";
+      }
+      default:
+        return Platform.OS;
+    }
+  }
+
   return (
     <SafeAreaProvider>
-      <SafeAreaView style={{ flex: 1 }}>
+      <SafeAreaView style={{ flex: 1, backgroundColor: "white", padding: 16 }}>
         <StatusBar barStyle={isDarkMode ? "light-content" : "dark-content"} />
+        <Text style={{ fontSize: 24, color: "red" }}>
+          Platform: {getPlatform()}
+        </Text>
 
         <View
           style={{

examples/react-native/visionos/Podfile

@@ -0,0 +1,12 @@
+ws_dir = Pathname.new(__dir__)
+ws_dir = ws_dir.parent until
+  File.exist?("#{ws_dir}/node_modules/react-native-test-app/visionos/test_app.rb") ||
+  ws_dir.expand_path.to_s == '/'
+require "#{ws_dir}/node_modules/react-native-test-app/visionos/test_app.rb"
+
+workspace "AsyncStorageVisionExample.xcworkspace"
+
+# 1 - enable new arch, 0 - disable it
+ENV["RCT_NEW_ARCH_ENABLED"]="1"
+
+use_test_app! :hermes_enabled => true, :fabric_enabled => true