Microsoft released Surface Duo on September 10th, 2020. Surface Duo is a brand-new device from Microsoft with dual-screen capability. A user can fold-open the device into one or two-screen mode. The two-screen mode is a new model for mobile developers to understand and tailor their applications.
We spoke on React Native for dual-screen mobile devices with Craig Dunn, Principal Program Manager for Cross-platform mobile devices for the Surface Duo Development Experience team, and Keil Aloia, Full Stack Platform Developer on the DSX team. The team created a set of open-source, React Native libraries facilitating dual-screen applications. They’ve put together a complete developer experience with emulators, libraries, documentation, and examples to help developers provide dual-screen mode functionality in their applications. The recording of the interview with demonstrations of Surface Duo and applications optimized for the device is available on YouTube.
About the Surface Duo
At 1:29, Craig showed off the Surface Duo device. The device had to stay in power off mode due to embargo, but we did get to see screens on the emulator later in the broadcast. The device looks like two thin phones hinged together. There are three modes; completely closed, opened halfway-two screens (think of a book or small laptop, depending on orientation), and opened all the way- a single screen mode.
The Surface Duo runs Android. You get the full Google Play app store experience. Android apps run without modification on the Surface Duo device, though only on a single screen or spread across both screens. Using the new open-source libraries from Microsoft, you can configure an application to target both screens independently, allowing for a much higher degree of multitasking activities.
Microsoft has worked on versions of the Surface Duo for over a decade. Protocol.com posted a detailed history of how the Surface Duo device came to be.
What do you do with two screens?
At 6:10, Keil showed a demonstration application of a Pizza Store running on the Surface Duo. The Pizza Store app has a menu and an ordering capability. We’ve all been ordering takeout a lot during the pandemic, so I applauded their demo app choice. With the Surface Duo, you can assign parts of the application to individual screens – like putting the menu on the left, and the order entry form on the right. The helper libraries provided by Microsoft facilitates this novel approach to mobile application development. Craig said the Microsoft team works closely with the Google team and other technical community members to ensure the dual-screen configuration was implemented in a standard way across the industry. Thus, if you use the libraries to enable dual-screen workflow, you won’t have to worry about recoding your application to target a different dual-screen device.
Can you move things between two different apps?
Obed Parlapiano asked Craig if it were possible to drag items from one application to another application. Craig said Android had the drag/drop/drop target functionality for quite some time, but the technology was not used often due to the lack of devices where it was appropriate. Thus, if the developers configured the apps to understand the drop target’s data, it would be possible to move items from one app to another.
What modules are provided
The Microsoft React Native dual-screen repository contains three modules; TwoPaneView, DualScreenInfo, and TwoPane-Navigation.
TwoPaneView is a React Native layout component that will show either one or both of its panes depending on its width. The app can force TwoPaneView to display only one pane using the Single-mode or always two-pane, regardless of overall width, using Double mode.
DualScreenInfo is a lower-level module that keeps track of information about the device layouts and modes. You can get helpful things like whether the app running on a dual-screen capable device, or even how large the hinge area is.
TwoPane-Navigation is a library that both works with the react-navigation library or used by itself. This library facilitates viewing each pane or screen on the multi-screen device as its own stack-like (LIFO) system and rendering just the topmost element as the current page for the user to see.
It’s important to note the overall strategy in play here is to have dual-screen functionality built into Android, so you’ll use standard code optimized at the operating system level. Android Jetpack has dual-screen capability in Alpha status.
How much work is it to port your app to dual-screen support
At 25:38, TJ asked how much work would it take to alter an application for dual-screen support and which workflows made the most sense. Craig mentioned there were interface patterns that made the best candidates for dual-screen support. You can find a discussion about those patterns and an introduction to dual-screen device development on the Microsoft Documentation. Make sure to look at the diagrams to understand the different modes.
The amount of effort it takes to provide dual-screen support is proportional to the number of patterns used in your app that work best on dual-screens. You could take a comprehensive approach or optimize the top ones that make sense. You could also do nothing, and your apps still work. The choice is yours to make.
What about Dual Screens for the Web?
At 34:27, Ely_lucas asked if there were dual-screen detection and support for the web. Craig let us know there were both CSS Media Queries and JavaScript APIs to help developers figure out the device’s dual-screen capabilities in a web browser context. Microsoft Edge already supports the technology.
Microsoft is working with the W3C on a standards-based approach to dual-screen detection. As of the time of publication, the Canary versions of both Edge and Chrome have dual-screen support. The Canary versions of DevTools can now switch layouts to a Surface Duo for layout visualization and debugging.
How to get started
The first thing to do is download the Android Dual-Screen emulator provided by Microsoft. You’ll find it in the Microsoft React Native Dual-Screen documentation. While on the docs site, read up on the patterns where you can provide enhanced support for dual-screens in your application.
The libraries you’ll need are on the React Native DualScreen GitHub repository. Bring those into your project and start making dual-screen magic.
- Documentation
- Repository
- Project Blog & Surface Duo Developer blog
- Article on Navigation Pane
- Surface Duo Development Twitter
