Skip to content

Latest commit

 

History

History
251 lines (145 loc) · 11.2 KB

File metadata and controls

251 lines (145 loc) · 11.2 KB

Foldable and dual-screen devices on the Web

This repository contains useful information/notes for developers targeting foldable and dual-screen devices.

Announcements

Announcing dual-screen preview SDKs and Microsoft 365 Developer Day

Microsoft 365 Developer Day: Dual-screen experiences

Xamarin Goes Dual Screen

All in the Flex: YouTube Gets New Optimization for the Galaxy Z Flip

Polyfills

Window Segments Enumeration API polyfill

CSS Foldable Display polyfills

Proposed CSS primitives to enhance the reading experience on dual-screen & foldable devices.

Emulators

Surface Duo

Surface Duo is the 5" Android dual-screen device.

Introducing Surface Duo

Surface Duo SDK Preview Release

Surface Duo Emulator hands on

Surface Duo Emulator hands on

Surface Neo

Surface Neo is the 9" Windows 10X dual-screen device.

Introducing Surface Neo

Get the Windows 10X development tools

Demos

CSS spanning media feature demo in a web-based device emulator

Docs

Create apps for dual-screen devices

React Native for Surface Duo

Get the Surface Duo SDK

Videos/Presentations

Build Apps for Foldable, Multi-Display, and Large-Screen Devices (Google I/O'19)

Build dual-screen experiences​ (Microsoft 365 Developer Day)

  • How Windows 10X runs UWP and Win32 apps
  • Application security and deployment
  • Getting started with Microsoft Emulator and Windows 10X
  • How to build dual-screen experiences with Windows UI on Windows 10X
  • Cross-platform dual-screen experiences Xamarin
  • How to bring your Android apps to Surface Duo
  • How to build dual-screen experiences for the website & web apps
  • Building cross platform experiences using React Native
  • Dual-screen app UX guidance
  • Dual-screen devices + Microsoft Graph

Building cross platform experiences using React Native

Overview of how to get started creating cross-platform Android and Windows experiences using React Native

React Native: Build rich Windows and mobile applications easily using JavaScript - BRK3071

Discover how to share code across platforms and the web, leverage the large JavaScript and React ecosystems, all while getting a full-fidelity native experience, unfettered access to the native platform, and ability to leverage and move forward your existing Windows assets.

React Native: Build rich apps for Windows and mobile easily using JavaScript | BRK3319

learn about how Office is using React Native in their apps, and find out about investments across Microsoft to help developers using React Native.

React Native EU 2019: Micah Lewis & EJ Layne - React Native @ Microsoft

MS Build 2020

React Native: Build cross platform apps that target Windows, Mac, and more!

How to bring your Android apps to Surface Duo with Xamarin

WebView2: Bringing the best of the web to your native apps

Supported by

Edge

Xamarin.Forms

Xamarin.Forms Comes to Surface Duo and Surface Neo Xamarin.Forms dual-screen

Repositories

React Native dual-screen

react-native-tscodegen

TypeScript Code Generation for React Native Turbo Module

ReactXP

ReactXP is a library for cross-platform app development using React and React Native.

React Native for Windows

Build native Windows apps with React.

react-native-windows-samples

A companion to the React Native for Windows repo and features sample React Native apps, components, and templates.

More info

Microsoft Edge WebView2 (developer preview)

To use in hybrid apps when hosting web content within native Windows apps.

Building hybrid applications with the WebView2 developer preview

w3c

Proposing new CSS primitives to enable great web experiences on foldable & dual-screen devices

App Examples

Contoso Travel app

Contoso Travel app

Contoso Travel app that is designed to work beautifully on a dual screen device as well as on desktop.

Contoso Foods app

Contoso Foods app

Contoso Foods is a dual screen device demo app built around a consumer grocery shopping experience, powered by the Microsoft Graph Toolkit.

Xamarin TV App

Xamarin TV App (Developer Day 2020 Keynote Demo)

Xamarin TV App

Dual-screen capable Xamarin TV app.

Duo-Robots

This app is a simple master-detail demo built for the Surface Duo using Xamarin.Forms.

Duo-Robots

SDK Samples

Surface Duo SDK Samples

Surface Duo SDK Samples

Surface Duo Xamarin Android Samples

Surface Duo Xamarin Android Samples

Surface Duo SDK Samples in Kotlin

Surface Duo SDK Samples in Kotlin

Extras

First Look: Windows 10X Preview

Articles

Build React Native apps for Microsoft Surface Duo

Introducing SurfaceDuoLayout Designer Preview for Android Studio Developers

Preview dual-screen layouts in Android Studio.

Introducing dual-screen layouts for Android

Dual-screen layout control for Java and Kotlin developers.

Getting started with React Native for Windows

React Native for Windows and native modules: how to add CI/CD to your project

Building a React Native module for Windows

Get Started with Flutter on Surface Duo

Bring your Xamarin apps to Surface Duo

Bring your app to Surface Duo

Bring your app to Surface Duo – Step 1

Bring your app to Surface Duo – Step 2

Platforms

Uno Platform

On iOS and Android, the Uno Platform relies extensively on the Xamarin Native stack. On WebAssembly, the Uno Platform relies directly on the Mono-Wasm runtime. In the end, Uno Platform provides you with the ability to run single codebase, C# and XAML apps on all these platforms.

Feedback

Surface Duo SDK

Official feedback channel for Surface Duo SDK