Moyes says Microsoft is extending React Native’s shared core to Windows and macOS, alongside its existing Android and iOS support. He highlights Messenger’s native video-calling app and the Xbox beta app as examples of teams using React Native for desktop.
Building For Desktops And Dual Screens
Speaker
Steven Moyes, a program manager on Microsoft’s React Native team, explains how React Native can support desktop apps on Windows and macOS and dual-screen apps such as those for Surface Duo at React Native EU 2020, hosted by Callstack.
Moyes reports that the Xbox team reduced memory use from 1.6 GB to 350 MB and CPU spikes from 50% to 30% after moving from Electron. More than 95% of surveyed users said performance was the same or better. He demonstrates creating a macOS app with the React Native CLI and the `react-native-macos-init` command.
Moyes points developers to React Native Directory, which includes filters for Windows and macOS modules, while noting desktop support for existing modules is still a work in progress. Native modules may need platform-specific implementations; Windows implementations can use C# or C++. Fluent UI React Native adds customizable, theme-aware components with accessibility support and platform-native fonts.
Moyes describes Microsoft’s dual-screen APIs for Android devices such as Surface Duo. TwoPaneView lays out content in two panes, while DualScreenInfo reports whether an app spans both screens and provides device orientation information. In the RSS app demo, the feed list and web view appear in separate panes when the app spans both screens.
Moyes directs developers to a Build 2020 video about the RSS reader app and to aka.ms/reactnative for setup guides, API and module documentation, and Fluent UI information. He also recommends contacting the Microsoft React Native team on Twitter at @ReactNativeMSFT or through GitHub.
Takeaways
- React Native desktop support can extend an app’s reach to Windows and macOS while building on its shared core.
- Measure resource use and user experience when evaluating a move from Electron; the Xbox team reported lower memory use and CPU spikes.
- Check React Native Directory for desktop-compatible modules, and plan for native platform work where needed.
- Use TwoPaneView and DualScreenInfo to adapt Android app layouts and behavior for dual-screen devices.
- Start with the official Windows and macOS guides, then verify which modules and UI components fit the target platforms.
Mentioned in this talk
Search inside this talk
What was claimed 12
- uses
Microsoft uses React Nativein brownfield apps“how Microsoft is using React Native at scale”
0:09inReact Native at Scale: How Microsoft is betting big on React Native to target BILLIONS of usersYouTube Verified14 sources· Talk
- role atStephen Moyes is senior product manager atMicrosoft
“I'm a program manager on the React Native team at Microsoft.”
0:09inReact Native at Scale: How Microsoft is betting big on React Native to target BILLIONS of usersYouTube Verified3 sources· Talk
- integrates with
“We work closely with Meta, Callstack, and others.”
0:17inFrom Gaming to Productivity: how Microsoft is using React Native across a portfolio of experiencesYouTube Verified7 sources· Talk
- uses
Messenger uses React Nativedesktop app development“they're using React Native to help them build their app.”
YouTube Unverified1 source· Talk
- integrates withReact Native integrates with ElectronTeams chose React Native after exploring Electron
“Although they were originally looking at Electron, they're using React Native to unlock system capabilities.”
YouTube Unverified1 source· Talk
- metricXbox app: Over 95% of surveyed users noticed performance was the same as or better than before
“over 95% of users surveyed noticed that the app's performance was the same as or better than before.”
YouTube Unverified1 source· Talk
- metricXbox app: CPU usage spikes decreased from 50% to 30%
“CPU usage spikes went from 50% down to 30%.”
YouTube Unverified1 source· Talk
- metricXbox app: Memory consumption decreased from 1.6 GB to 350 MB
“memory consumption went from 1.6 GB all the way down to 350 MB.”
YouTube Unverified1 source· Talk
- usesXbox team uses React NativeXbox app development
“the Xbox team found that memory consumption went from 1.6 GB all the way down to 350 MB.”
YouTube Unverified1 source· Talk
- feature
fluentui: Customizable, theme-aware components with accessibility built in“These components are customizable, theme-aware, and have accessibility built in.”
YouTube Unverified1 source· Talk
- featureDualScreenInfo: Provides app spanning state and device orientation information
“It provides lower-level information about the state of the app ... It also provides orientation information about the device.”
YouTube Unverified1 source· Talk
- featureTwoPaneView: Builds dual-screen-aware apps using two panes
“TwoPaneView component, which helps you build apps that are dual-screen aware by having two panes.”
YouTube Unverified1 source· Talk
