React Native Apple Vision Pro

Remember the moment in June 2023 when Apple unveiled their new device at the end of a conference, dropping the famous phrase, "one more thing"? That moment introduced Apple Vision Pro, marking their first major hardware release in nearly nine years. The keynote wasn’t just about new tech but about redefining the future. Imagine large, floating windows controlled by only your eyes and hands.

As soon as you witness this, the question arises: How do we build apps for this new platform using React? The vision is clear—a world where those amazing React Native apps can be ported effortlessly to this cutting-edge device. Traditionally, cross-platform app development has relied on tools like Unity with C#. While Unity excels in game development, it’s not the go-to for creating spatial apps. Plus, unlike React, which serves as a universal app-building language, Unity comes with a cost. Thanks to React Native, your code can ship to over ten platforms. So, why not add XR devices to that list?

React Native already supports iOS and Android out of the box. But thanks to the vibrant open-source community, it now extends to even more platforms, including macOS, tvOS, Windows, Web, and Skia, which supports Linux and macOS. Today, this family grows with the addition of React Native Vision OS.

The work done is all available as open-source software on GitHub. Vision OS, the operating system for Apple Vision Pro, builds on iOS, making the transition smoother. However, spatial apps bring new challenges—you’re not using a mouse or keyboard but instead rely on hand and eye tracking. You’re no longer sitting in front of a screen; you’re immersed in a world where screens surround you, and your content can be rendered anywhere.

Apple’s push for apps to be built with SwiftUI is noteworthy, especially since React Native doesn’t use SwiftUI. This required some changes, but the vision remains clear—making React Native apps work seamlessly on Vision OS.

As you dive into the technical aspects, you encounter issues like deprecated APIs that don’t align with Vision OS. For instance, UIScreen’s MainScreen API, used to retrieve screen size, doesn’t apply to Vision Pro, where you have two screens—one for each eye. So, you shift focus from screens to windows floating in space, and adapt React Native to work within these constraints.

Making React Native work on Vision OS involved refining the build process, especially tools like Cocoapods and CMake. These tools are critical for linking and building dependencies on iOS. As with any pioneering effort, the work wasn’t without hiccups—such as CMake initially building for the actual device instead of the simulator.

As the journey with React Native Vision OS continues, the possibilities are limitless. With every challenge overcome, the future of app development becomes more exciting and expansive.

Check Out the Video here. ⬇️