{"id":337,"date":"2020-04-30T13:27:42","date_gmt":"2020-04-30T20:27:42","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/surface-duo\/?p=337"},"modified":"2020-04-30T16:45:52","modified_gmt":"2020-04-30T23:45:52","slug":"build-react-native-apps-for-microsoft-surface-duo","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/surface-duo\/build-react-native-apps-for-microsoft-surface-duo\/","title":{"rendered":"Build React Native apps for Microsoft Surface Duo"},"content":{"rendered":"<p>Hello, React Native for Android developers!<\/p>\n<p>In previous blog posts we&#8217;ve shown how app developers can build dual-screen apps using <a href=\"https:\/\/devblogs.microsoft.com\/surface-duo\/introducing-dual-screen-layouts-android\/\">Java and Kotlin<\/a>, <a href=\"https:\/\/devblogs.microsoft.com\/surface-duo\/bring-your-xamarin-apps-to-surface-duo\/\">Xamarin and C#<\/a>, and <a href=\"https:\/\/devblogs.microsoft.com\/surface-duo\/dual-screen-games-with-unity-for-android\/\">games with Unity<\/a>. Today&#8217;s post is about how JavaScript and TypeScript developers can also target the Surface Duo using React Native.<\/p>\n<p>Earlier this year, Kiki Saintonge and Yulia Klein introduced the dual-screen capabilities Microsoft is proposing for React Native \u2013 you can watch their <a href=\"https:\/\/youtu.be\/L5qo6nCdj1A\">Developer Day session<\/a> below:<\/p>\n<p><iframe width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/L5qo6nCdj1A\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\nVideo: Building cross platform experiences with React Native<\/p>\n<p>Follow the instructions in this blog post to get started building your own React Native apps that take advantage of Surface Duo&#8217;s unique features.<\/p>\n<h2>How to get started with Surface Duo<\/h2>\n<p>To get started, you first need to <a href=\"https:\/\/docs.microsoft.com\/dual-screen\/android\/get-duo-sdk\">download and install the Surface Duo emulator<\/a>. If you already develop Android apps with React Native, you should have all the necessary prerequisites and are ready to build dual-screen apps.<\/p>\n<p>Following the <a href=\"https:\/\/reactnative.dev\/docs\/0.61\/getting-started\">React Native Getting Started instructions<\/a>, you will start a new project by running the following command:<\/p>\n<pre>npx react-native init AwesomeProject<\/pre>\n<p>Skip the instructions for configuring a device using Android Virtual Devices (AVD) in Android Studio, and instead start the <b>Surface Duo Emulator<\/b> from the <b>Start menu<\/b> (or the <b>run<\/b> command in the folder where it was installed). Then run the React Native project using this command:<\/p>\n<pre>cd AwesomeProject\r\nnpx react-native run-android<\/pre>\n<p>The default project will appear in the emulator and can be spanned across the two screens:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/04\/reactnative-emulator-800.png\" alt=\"React Native on Surface Duo emulator\" width=\"800\" height=\"522\" class=\"alignnone size-full wp-image-340\" srcset=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/04\/reactnative-emulator-800.png 800w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/04\/reactnative-emulator-800-300x196.png 300w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/04\/reactnative-emulator-800-768x501.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>Figure 1: React Native on a single screen<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/04\/reactnative-emulator-span-800.png\" alt=\"React Native spanned on Surface Duo emulator\" width=\"800\" height=\"522\" class=\"alignnone size-full wp-image-341\" srcset=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/04\/reactnative-emulator-span-800.png 800w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/04\/reactnative-emulator-span-800-300x196.png 300w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/04\/reactnative-emulator-span-800-768x501.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>Figure 2: React Native on two screens<\/p>\n<p>While that&#8217;s a good start, apps should be able to understand where the hinge is and behave appropriately when spanned. Below we will walkthrough the preview SDK that&#8217;s available to help developers access those APIs.<\/p>\n<h2>Dual-screen SDK for React Native<\/h2>\n<p>The <a href=\"https:\/\/github.com\/microsoft\/react-native-dualscreen\/\">React Native dual-screen SDK<\/a> is open source, so you can see the code that brings dual-screen capabilities to the Surface Duo. There are two modules in the SDK: DualScreenInfo and TwoPaneView.<\/p>\n<h3>React Native DualScreenInfo<\/h3>\n<p><a href=\"https:\/\/www.npmjs.com\/package\/react-native-dualscreeninfo\">DualScreenInfo<\/a> is a non-visual helper that provides information about the device so that your code and layouts can adapt to dual-screens. It contains the following methods:<\/p>\n<ul>\n<li><b>isDualScreenDevice<\/b> \u2013 check this before accessing other dual-screen-specific APIs.<\/li>\n<li><b>isSpanning<\/b> \u2013 whether the app is on one or two screens.<\/li>\n<li><b>windowRects<\/b> \u2013 the bounds of the two display rectangles (excluding the hinge area).<\/li>\n<li><b>didUpdateSpanning<\/b> \u2013 event listener so your code can respond when the app is spanned or moved to a single screen.<\/li>\n<\/ul>\n<p>These APIs can be used to build great custom experiences in React Native apps. Follow the <a href=\"https:\/\/www.npmjs.com\/package\/react-native-dualscreeninfo\">installation instructions<\/a> to get the package and ensure your Android project is configured correctly. The included example contains <i>MasterDetail<\/i>, <i>CompanionPane<\/i>, and <i>TwoPage<\/i> options \u2013 uncomment each one in <b>App.tsx<\/b> to try them out. <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/04\/reactnative-dualscreeninfo-800.png\" alt=\"CompanionPane React Native example\" width=\"800\" height=\"520\" class=\"alignnone size-full wp-image-342\" srcset=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/04\/reactnative-dualscreeninfo-800.png 800w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/04\/reactnative-dualscreeninfo-800-300x195.png 300w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/04\/reactnative-dualscreeninfo-800-768x499.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>Figure 3: CompanionPane demo in DualScreenInfo example<\/p>\n<h3>React Native TwoPaneView<\/h3>\n<p>The <a href=\"https:\/\/www.npmjs.com\/package\/react-native-twopaneview\">TwoPaneView<\/a> control provides additional assistance for building dual-screen apps. To add this to your app, first follow the <a href=\"https:\/\/www.npmjs.com\/package\/react-native-dualscreeninfo\">dualscreeninfo instructions<\/a> for Kotlin and activity configuration, then use <b>npm install react-native-twopaneview<\/b>.<\/p>\n<p>You can create a dynamic layout with the markup shown here:<\/p>\n<pre>&lt;TwoPaneView panePriority={this.state.panePriority} panePriorityVerticalSpanning={this.state.panePriority} >\r\n    {\/* Pane A *\/}\r\n    &lt;MasterContent\/>\r\n    {\/* Pane B *\/}\r\n    &lt;DetailContent\/>\r\n&lt;\/TwoPaneView><\/pre>\n<p>The panePriority and other features of the layout let you control what is shown in each screen configuration. The <a href=\"https:\/\/docs.microsoft.com\/en-us\/windows\/uwp\/design\/controls-and-patterns\/two-pane-view\">Windows TwoPaneView documentation<\/b> and <a href=\"https:\/\/docs.microsoft.com\/en-us\/uwp\/api\/microsoft.ui.xaml.controls.twopaneview?view=winui-2.3\">API reference<\/a> provide some hints about how the control works (although remember we&#8217;re still in preview!).<\/p>\n<p>These modules can be seen in action in the <a href=\"https:\/\/github.com\/microsoft\/react-native-dualscreen\/\">React Native dual-screen samples<\/a>. A typical master-detail layout is shown in this screenshot:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/04\/reactnative-contosopizza-800.png\" alt=\"Contoso Pizza React Native example\" width=\"800\" height=\"528\" class=\"alignnone size-full wp-image-343\" srcset=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/04\/reactnative-contosopizza-800.png 800w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/04\/reactnative-contosopizza-800-300x198.png 300w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/04\/reactnative-contosopizza-800-768x507.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>Figure 4: React Native TwoPaneView<\/p>\n<h2>Resources and Feedback<\/h2>\n<p>We&#8217;re just beginning our React Native story for Surface Duo and we&#8217;d love to hear from you about your experiences using the SDK, emulator, and your thoughts on how you might utilize them in your apps.<\/p>\n<p>Refer to the <a href=\"https:\/\/github.com\/microsoft\/react-native-dualscreen\/\">React Native dual-screen repo<\/a> to check out the code and the examples shown above. <\/p>\n<p><a href=\"https:\/\/register.build.microsoft.com\/\">Register now for Microsoft Build<\/a>, the digital event experience coming up on May 19-21, 2020. Keep an eye out for Surface Duo talks including dual-screen development with React Native. <\/p>\n<p>Finally, reach out using our <a href=\"http:\/\/aka.ms\/SurfaceDuoSDK-Feedback\">feedback forum<\/a> or message me on <a href=\"https:\/\/twitter.com\/conceptdev\">Twitter<\/a> or <a href=\"https:\/\/github.com\/conceptdev\">GitHub<\/a> with your feedback.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hello, React Native for Android developers! In previous blog posts we&#8217;ve shown how app developers can build dual-screen apps using Java and Kotlin, Xamarin and C#, and games with Unity. Today&#8217;s post is about how JavaScript and TypeScript developers can also target the Surface Duo using React Native. Earlier this year, Kiki Saintonge and Yulia [&hellip;]<\/p>\n","protected":false},"author":570,"featured_media":340,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[31,412,411,46,413],"class_list":["post-337","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-surface-duo-sdk","tag-dual-screen-development","tag-javascript","tag-react-native","tag-surface-duo","tag-typescript"],"acf":[],"blog_post_summary":"<p>Hello, React Native for Android developers! In previous blog posts we&#8217;ve shown how app developers can build dual-screen apps using Java and Kotlin, Xamarin and C#, and games with Unity. Today&#8217;s post is about how JavaScript and TypeScript developers can also target the Surface Duo using React Native. Earlier this year, Kiki Saintonge and Yulia [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/337","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/users\/570"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/comments?post=337"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/337\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media\/340"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media?parent=337"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/categories?post=337"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/tags?post=337"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}