Hosany outlines work across the runtime, UI frameworks, and developer tools. React Native for macOS 0.63 added SVG, tooltips, and key loop support; Windows 0.64 shipped alongside the iOS and Android release. Microsoft was working to bring macOS into that shared release cadence too.
Unlocking the next generation of desktop app with React Native
Speaker
Khalef Hosany, an engineering manager at Microsoft in the Office division, presents at React Native EU 2021 about Microsoft’s work on React Native for Windows and macOS, along with apps built on those platforms.
Windows support in Upgrade Helper makes version changes easier to review, and CodePush enables over-the-air bundle updates. Microsoft reported experimental binary distribution builds about 80% faster with half the disk usage in its tests. Windows also supports Hermes with a build flag, plus debugging and profiling.
Fluent UI React Native provides cross-platform controls with Fluent styling and options for custom branding. React Native XAML exposes native Windows controls to JavaScript for developers focused on Windows. Babylon React Native brings 3D models to iOS, Android, and Windows, including augmented reality on HoloLens.
Hosany describes Messenger for Windows and macOS, a classroom app migrated from iOS and Android to Windows, and a Mashreq Bank app sharing most of its code between Android and Windows. Microsoft also uses React Native in Office apps across iOS, Android, macOS, and Windows, and in Xbox experiences.
React Native Test App simulates apps across iOS, Android, macOS, and Windows, and lets developers switch React Native versions. Hosany also points to RNX Kit for tools to maintain apps and libraries. He demonstrates live reload on macOS and Windows and directs developers to Microsoft’s getting-started guides at aka.ms/react-native.
Takeaways
- Check which React Native community modules are supported on each target platform before planning a shared app.
- Use Upgrade Helper and align desktop upgrades with mobile releases to simplify version maintenance.
- Measure build time and disk use with binary distribution before adopting it, since the reported gains came from experimental tests.
- Choose UI libraries based on your target: Fluent UI for cross-platform controls, XAML for Windows-specific interfaces, and Babylon for 3D and AR.
- Test platform-specific interaction needs: the Mashreq app shared most code while adapting Android touch use for Windows mouse and keyboard.
Mentioned in this talk
Search inside this talk
What was claimed 23
- built
“The first one I'm going to talk about is Fluent UI React Native”
YouTube Source changed2 sources· Talk, GitHub· archived
- role atKhalef Hosany is engineering manager at Microsoft Office
“I work in the Office division”
YouTube Unverified1 source· Talk
- role atKhalef Hosany is engineering manager at
Microsoft“I am an engineering manager at Microsoft”
YouTube Unverified1 source· Talk
- built
“I’ve been working ... primarily on React Native for Windows.”
1:16inWhat’s next for React Native for Desktop?YouTube Verified5 sources· Talk
- built
“investments in React Native for Windows and macOS”
YouTube Verified2 sources· Talk
- built
“we made this test app and a bunch of tools around it”
2:00inCommunity is stronger than everYouTube Verified4 sources· Talk
- featureReact Native for macOS: Version 0.63 supports SVG, tooltips, and the key loop
“released version 0.63 of the platform. It includes ... support for SVG, tooltips, and the key loop”
YouTube Unverified1 source· Talk
- featureReact Native for Windows: Version 0.64 released; version 0.65 in development
“we've released version 0.64, and we're currently working on version 0.65”
YouTube Unverified1 source· Talk
