WhoBuilt

React Native for Apple Vision Pro and visionOS

Dec 21, 2023· 1 h 14 min· 4.4K views·Watch on YouTube

Speakers

Oscar Kki, a senior React Native developer at Callstack, and Mi Peshawa, Callstack’s head of technology, discuss bringing React Native to visionOS on the React Native Show podcast with its host.

VisionOS and Apple Vision Pro

The guests distinguish VR as a fully immersive virtual world, AR as digital elements overlaid on the real world, and XR or mixed reality as covering both. They describe Apple Vision Pro as blending digital content with a camera view of the surroundings, controlled through eyes, hands, and voice. Its visionOS supports windows, 3D volumes, and shared or immersive spaces.

Why build a React Native platform

Callstack’s visionOS project is an out-of-tree React Native platform, with changes to core code that allow it to compile for visionOS. The team says the work involved substantial research across React Native and its libraries, despite roughly 1,000 to 2,000 lines of code changes. They see possible uses in porting existing multi-platform apps and building immersive data visualizations or streaming experiences.

Early development and integration

The initial release supports greenfield apps, both React Native architectures, Hermes, and a CLI init command. The guests describe it as experimental, with third-party library support still developing; Reanimated compiled in a local hack but was not officially supported. Brownfield apps can add SwiftUI for native visionOS features, while running immersive spaces and volumetric windows from JavaScript remained a future idea.

Platform challenges and open source work

The team added visionOS support across CocoaPods dependencies and addressed unsupported APIs, including UIScreen, which does not fit a window-based device. They kept visionOS aligned with iOS for platform checks so apps can reuse much of the iOS ecosystem, and built a custom Metro file resolver. Work on Hermes simulator builds also produced a fix that enabled local builds for macOS.

Roadmap and broader XR goals

Callstack’s next steps included production readiness, CI, end-to-end testing, and tools for debugging, profiling, and testing. The longer-term idea was to connect React Native with WebXR through JSI, potentially extending it to other headsets. The team invited feedback and contributions to its public repository.

Takeaways

  • A platform port can require extensive ecosystem research even when its core code changes are relatively small.
  • Check platform APIs and dependencies early; visionOS did not support some APIs used by React Native and its libraries.
  • Keep platform identity decisions compatible with existing libraries when most code is shared with iOS.
  • Treat an experimental platform release as a starting point and plan for library support, CI, testing, debugging, and profiling.
  • Fixes made for one platform can benefit others, as the Hermes build work also improved macOS support.

Mentioned in this talk

Search inside this talk

What was claimed 19

Show all 19 facts

Related talks