Unlock Next-Level AR/VR Experiences: Integrating Apple Vision and React Native

Explore the Enhanced Capabilities of Apple Vision Pro with React Native Integration. Unlocking the platform's full potential, this integration enables immersive experiences and XR features on visionOS, surpassing compatibility mode limitations. Overcoming challenges involved adapting code for visionOS specifics and addressing simulator constraints. Developers are invited to experiment with creating spatial apps using React Native Community CLI, contributing feedback to this evolving project.

On visionOS, apps open in a 'shared space' where each app is positioned beside others. In this setup, we can't get the window height and width by referring to the device's main screen. As a result, we had to rewrite a significant portion of the logic related to fetching screen dimensions, submitting pull requests to React Native core in the process.

Here is an example of shared space mentioned above:

We heard about Apple Vision Pro on June 5, 2023, and then we began figuring out how to use React Native with it.

Prerequisites:

• Xcode 15.2 +
• visionOS simulator runtime
• CMake 3.28.0 +
• Apple Vision Pro is not required! (You can use a simulator)

To create a new project you can use the React Native Community CLI:

npx @callstack/react-native-visionos@latest init MySpatialApp

This will create a new project from visionOS template. Once you will go into the project directory, you will see a new folder named visionos next to the ios folder.

Firstly, let's install Cocoapods inside of visionos folder:

bundle install && bundle exec pod install

When the installation finishes, you can either open the project in Xcode by running (xed visionos) or use built-in CLI commands:

yarn visionos

After the app launches, you should see "Welcome to React Native visionOS":

Special thanks to Callstack for making it all possible! Dive into the reality of Apple Vision Pro with React Native. Discover how Callstack is bringing React Native Vision OS to life and explore the exciting developments still on the horizon in this cutting-edge technology.