WhoBuilt

React Native ❤️ Apple Vision Pro: Your App in the New Dimension

Sep 25, 2024· 17 min· 771 views·Watch on YouTube
#Mobile Development

Speaker

Oskar Kwaśniewskisenior software engineer at Callstack

Oskar Kwaśniewski, a React Native developer at Callstack working on React Native visionOS, explains how to extend React Native apps to Apple Vision Pro and what it took to bring a large existing app to the platform.

Why build universal apps

Oskar defines universal apps as apps that work across multiple devices and platforms, from phones and computers to TVs and XR headsets. He says a shared codebase can make development more efficient, reach more users, and give people a familiar experience as they move between devices.

React Native capabilities for visionOS

Oskar describes community-built out-of-tree platforms that extend React Native beyond mobile, and notes that the community CLI is needed for platforms such as visionOS. React Native visionOS adds APIs for hover effects, window ornaments, managing multiple windows, and blending app content with the real surroundings. It also uses a SwiftUI app entry point and adds a `run-visionos` command.

Progressive enhancement across platforms

Examples from Zillow Immersive and Lowe's Style Studio show how apps can present 3D homes or kitchens on Vision Pro. Oskar applies progressive enhancement to React Native: a standard platform can show an item's image, while visionOS can show its 3D model. The basic experience remains available across platforms, with richer features on supported devices.

Migrating Expensify to visionOS

Oskar tried the migration on Expensify, which has nearly 300,000 lines in its `src` folder and over 120,000 commits. The work took one and a half days to reach a working state, with much of the effort spent on build issues and dependencies; 43 dependencies needed checking, and invoice scanning had to be disabled. He also moved the bottom navigation into a visionOS ornament and recommends contributing library fixes upstream to avoid maintaining patches or forks.

Community work and future plans

Oskar says the React Native visionOS project had passed 850 stars and credits community contributions, including support for other platforms and improvements to React Native APIs. The project is currently a fork, but the goal is to integrate its work into React Native core and smaller packages. Planned areas include reusable window and XR APIs, Babylon React Native support, and WebGPU on visionOS.

Takeaways

  • Treat visionOS as a progressive enhancement: keep a useful baseline experience and add spatial features where supported.
  • Check native dependencies early; unsupported libraries were the main migration blocker in the Expensify experiment.
  • A large React Native app reached a working visionOS state in one and a half days, though dependencies and unfinished code still needed work.
  • Upstream platform support fixes when possible to reduce the burden of carrying patches or maintaining a fork.
  • Design for visionOS conventions, such as using ornaments for navigation, and consult Apple's Human Interface Guidelines.

Mentioned in this talk

CallstackZillowLowe'sMicrosoftVision ProZillow ImmersiveLowe's Style StudioExpensifyFirebaseApple Human Interface GuidelinesReact NativevisionOSExpoSwiftUIElectronBabylon React NativeWebGPUProgressive enhancementWilliam CandillonMatt HargettMichał Pierzchała

Search inside this talk

What was claimed 16

Related talks