WhoBuilt

What’s next for React Native for Desktop?

Sep 25, 2024· 23 min· 575 views·Watch on YouTube

Speakers

Microsoft senior product manager Steven Moyes and senior software engineer Saad Najmi discuss React Native for Windows and macOS at React Universe Conf 2024 in Poland.

Desktop builds on React Native skills

Moyes describes Microsoft’s goal of helping developers reuse React Native skills to build desktop apps or extend mobile apps to desktop. He says major Microsoft apps use React and React Native at a scale of over a billion users, and notes growing downloads for both Windows and macOS.

Keeping macOS aligned with core

Najmi says React Native macOS and Windows released version 0.75, with macOS reaching it faster than before. He describes the work behind syncing desktop with core, including supporting visionOS dependencies, updating macOS RedBox, and aligning the cursor prop with web CSS names. The shared pointer behavior can also support hover effects on visionOS, iPad, and desktop.

Windows moves to the modern platform

Moyes explains that React Native for Windows is moving from UWP, which shipped with Windows and changed slowly, to the Windows App SDK. The SDK ships separately from the operating system and includes WinUI 3, lifecycle APIs, notifications, and other capabilities. This change enables more consistent updates and access to newer Windows features, but migrating is a breaking change.

New Architecture progress and desktop APIs

Najmi says desktop support includes bridgeless mode, React Native DevTools, and newer Hermes versions on macOS, with shared iOS code helping keep the developer experience consistent. Moyes says Windows apps can already be deployed to the Microsoft Store with the New Architecture, while full WinUI 3 support, documentation, and accessibility API gaps remain in progress. He encourages developers and library maintainers to experiment.

Aligning keyboard input and native experiences

Moyes points to desktop APIs for accessibility, theming, multi-window support, and input, and recommends the Windows and macOS gallery apps as examples. Najmi says Windows and macOS had different keyboard event APIs and behavior, making cross-platform code harder to write. macOS added the Windows-aligned `keyDownEvents` prop in version 0.74 and deprecated `validKeysDown`.

Takeaways

  • Check whether React Native desktop can extend an existing mobile app using skills your team already has.
  • Plan for a breaking migration when moving a Windows app to the New Architecture.
  • Try the Windows New Architecture today, while accounting for unfinished WinUI 3 and accessibility work.
  • Use the aligned `keyDownEvents` prop for keyboard handling across Windows and macOS.
  • Explore platform gallery apps to see how desktop accessibility, theming, and input can shape native experiences.

Mentioned in this talk

Search inside this talk

What was claimed 14

Show all 14 facts

Related talks