VisionOs support for existing React Native app

[mpatafio]

Hi all!

is it possible to integrate react-native-visionos within an existing React Native app?

Thanks in advance.

[okwasniewski]

Hey!

Yes, it's possible. Currently, there is no automated way to do this (but we have this on our backlog).

Here are the steps you need to take:

1. Generate a new project and copy visionos folder to an existing one.
2. Add @callstack/react-native-visionos and @callstack/out-of-tree-platforms as dependencies
3. Modify metro.config.js and add custom resolver:

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);

4. Add exclude to tsconfig.json

"exclude": [
    "**/Pods/**",
]

You might run into some issues with your dependencies not supporting visionOS, In that case you can try quickly patching their podspecs using method described in this blog post: https://www.oskarkwasniewski.dev/blog/bringing-react-native-libraries-to-apple-vision-pro

[MP185496]

Sure:
In my existing project I installed @callstack/react-native-visionos and @callstack/out-of-tree-platforms
Made new project with npx @callstack/react-native-visionos@latest init Mobile
Copied visionos folder from that project into my project

Added in metro.config.js
resolveRequest: getPlatformResolver({
platformNameMap: {visionos: '@callstack/react-native-visionos'},
}),

Added in tsconfig.json
"exclude": [
"/Pods/",
]
Searched in node_modules for platform support but couldn't find any s.platforms in them
changed folder path of node_modules in Podefile of visionos folder to be on location where are my node_modules

[milanp93]

@okwasniewski Hey any thoughts on this, did you have time to make the guide for this use case? Thanks

[okwasniewski]

@milanp93 Yes, there you go: https://callstack.github.io/react-native-visionos-docs/docs/guides/integrate-into-existing-projects

[milanp93]

@okwasniewski Thanks! is there any workaround when we use some of the expo packages?

[okwasniewski]

Unfortunately, not at the moment