Integrate into existing projects

React Native visionOS allows you to take your existing React Native codebase and run it on visionOS.

This guide describes how to extend your app's capabilities by adding a new platform.

1. Initialize a new project using react-native-community/cli:

Use the same name that you have in your main app.

React Native >= 0.75

npx @react-native-community/cli@latest init <YourAppName> --template @callstack/visionos-template@latest

React Native <= 0.74

npx @callstack/react-native-visionos@latest init <YourAppName>

2. Copy visionos folder to your destination project.

cp -r <YourAppName>/visionOS YourApp

3. Add the necessary dependencies to your project:

yarn add @callstack/react-native-visionos
yarn add --dev @callstack/out-of-tree-platforms

4. Modify metro.config.js to include custom resolver.

This resolver rewrites imports from react-native -> @callstack/react-native-visionos when bundling the app for that platform.

const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
const { getPlatformResolver } = require("@callstack/out-of-tree-platforms");

const config = {
  resolver: {
    resolveRequest: getPlatformResolver({
      platformNameMap: { visionos: "@callstack/react-native-visionos" },
    }),
  },
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

5. Add visionos/Pods to your .gitignore file.

echo "**/Pods/" >> .gitignore

6. Done!

warning

Currently, Expo is not supported.