\n The TwoPane-Navigation<\/a> module was built to solve the problem of retaining state across screens when apps shift positions on dual-screen devices and evolved into a powerful library that empowers developers to build apps with less focus on navigation problems. It is built to work side by side with the react-navigation library or work on its own as a replacement. This allows you, the developer, to have a flexible and premium developer experience to help pioneer the new wave of dual-screen device applications.\n<\/p>\n \n The TwoPane-Navigation library leverages Redux<\/a> and is built around the core concept of viewing each pane (screen) on your dual-screen device as its own stack (LIFO), rendering the top element of the stack as the current page.\n<\/p>\n \n Figure 1: Two conceptual navigation stacks, one on each screen<\/em>\n<\/p>\n \n The new TwoPaneApp<\/a> must be the base for your React Native application and has the following properties:\n<\/p>\n \n The code below shows an example application definition:\n<\/p>\n \n The components are defined below \u2013 properties can be set or overridden for each pane:\n<\/p>\n \n The TwoPaneApp can automatically detect and handle the display on one screen or being spanned across two screens. When the app is first opened, we will see:\n<\/p>\n \n \n If we span the application across both screens, we will see:\n<\/p>\n \n \n The Panes have a variety of Hooks and Methods, which are outlined in the TwoPane-Navigation docs<\/a>.\n<\/p>\n \n Now with our TwoPane-Navigation app set up, we can finally start navigating.\n<\/p>\n \n To navigate between panes, we have a variety of built-in methods, but for this example, we\u2019ll only introduce you to the core methods.\n<\/p>\n \n The syntax for moving forward has a number of options for maximum flexibility. Calling Pane.Add pushes an element to the top of the stack, or replaces the original with the new element.\n<\/p>\n \n For this example, we will be pushing to twoPane if both panes are active, or we will be pushing to the onePane if only using one pane.\n<\/p>\n \n If we run our application in twoPane mode, we will see that we have only pushed the new screen to the twoPane stack (indicated by the back button on the second screen):\n<\/p>\n \n \n Because we provided an override on our default in twoPane config, the text color for the header is red.\n<\/p>\n \n The header provided by TwoPane-Navigation automatically includes a back button when it\u2019s possible to go back from the current pane. Note: If there\u2019s only one pane in the stack, there\u2019s nothing to go back to, so there\u2019s no back button.\n<\/p>\n \n If you want to programmatically go back one element in the navigation stack, you can do so by calling:\n<\/p>\n \n If you have multiple panes in the stack and would like to go back to the very first pane in your stack (defaultPane), you can use:\n<\/p>\n \n BackToHome removes all elements of the stack and returns the base component.\n<\/p>\n \n To use React Navigation with the TwoPane-Navigation module, create the required navigators (i.e. StackNavigators, SwitchNavigators, DrawerNavigators, etc.) and pass the appContainer into the navigationContainer prop in our TwoPaneApp component. After you have added the required navigators, you can then access the navigation\/route objects with the useNavigation\/useRoute hooks.\n<\/p>\n \n When you want to keep panes through pane transition from onePane to twoPane mode, you need to mark the screens you want as isMergeOne or isMergeTwo.\n<\/p>\n \n It is very simple to enable this behavior. Simply mark \n With this setting, when the application is unspanned to a single screen, it keeps the correct pane on top, including state:\n<\/p>\n \n \n Figure 5: Unspanning while preserving state<\/em>\n<\/p>\n \n Visit the docs<\/a> and sample code<\/a> to see more advanced usage, such as pane merging, header customization, and screen overlays, and try the new navigation module in your apps. Please provide us with your feedback on the GitHub repo<\/a>.\n<\/p>\n \n We would also love to hear from you about your overall experience using the SDK, emulator, and what helpers or controls you\u2019d like us to work on next. Please reach out using our feedback forum<\/a> or message me GitHub<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" Hello, React Native for Android developers! In a previous blog post, we discussed these existing React Native dual-screen features: DualScreenInfo to find information about the device, and TwoPaneView to get assistance with building dual-screen apps. Today\u2019s post is about a new module we\u2019ve released for JavaScript and TypeScript that makes it easier to manage component […]<\/p>\n","protected":false},"author":13129,"featured_media":723,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[411,45],"class_list":["post-722","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-surface-duo-sdk","tag-react-native","tag-surface-duo-sdk"],"acf":[],"blog_post_summary":" Hello, React Native for Android developers! In a previous blog post, we discussed these existing React Native dual-screen features: DualScreenInfo to find information about the device, and TwoPaneView to get assistance with building dual-screen apps. Today\u2019s post is about a new module we\u2019ve released for JavaScript and TypeScript that makes it easier to manage component […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/722","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\/13129"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/comments?post=722"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/722\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media\/723"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media?parent=722"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/categories?post=722"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/tags?post=722"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}About TwoPane-Navigation<\/h2>\n
![\"stack](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/09\/stack-example.png\")
\n<\/p>\n\n
const App = () => {\r\n return (\r\n <TwoPaneApp \r\n onePaneDefault={ TwoPaneAppDefaultComponents.onePaneDefault }\r\n twoPaneDefault={ TwoPaneAppDefaultComponents.twoPaneDefault }\r\n config={ TwoPaneAppDefaultComponents.config }\r\n \/>\r\n );\r\n};\r\n<\/pre>\nconst TwoPaneAppDefaultComponents: ITwoPaneAppProps = {\r\n onePaneDefault: {\r\n key: 'onePane',\r\n paneElement: <OnePane \/>,\r\n header: {\r\n title: 'OnePane Title'\r\n }\r\n\r\n },\r\n twoPaneDefault: {\r\n key: 'twoPane',\r\n paneElement: <TwoPane \/>,\r\n header: { \r\n title: 'TwoPane Title'\r\n }\r\n },\r\n config: {\r\n onePane: {\r\n paneHeader: {\r\n backgroundColor: 'gray'\r\n },\r\n paneBody: {\r\n backgroundColor: 'black'\r\n }\r\n },\r\n twoPane: {\r\n paneHeader: {\r\n backgroundColor: 'gray'\r\n },\r\n paneBody: {\r\n backgroundColor: 'black'\r\n }\r\n paneHeaderText: {\r\n color: 'red'\r\n },\r\n paneHeaderIcon: {\r\n tintColor: 'red'\r\n }\r\n }\r\n }\r\n}\r\n<\/pre>\n![\"onePane](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/09\/onepane-example.png\")
\n
Figure 2: Only the first pane is visible on startup<\/em>\n<\/p>\n![\"twoPane](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/09\/twopane-example.png\")
\n
Figure 3: Both panes are visible when the app is spanned<\/em>\n<\/p>\n\n
Panes<\/h2>\n
\n
Navigating Panes<\/h2>\n
Moving Forward<\/h3>\n
(one | two | auto)Pane.Add(key: string, element: ReactElement, header?: IHeader, isMergeONE = false, isMergeTWO = false)<\/code>\n<\/p>\nautoPane.Add(\r\n 'exampleScreen',\r\n <NextExampleScreen \/>,\r\n header: {\r\n title: 'NextExampleScreen'\r\n },\r\n true,\r\n true)\r\n<\/pre>\n![\"twoPaneView](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/09\/twopaneview-example.png\")
\n
Figure 4: the second screen has a navigation stack<\/em>\n<\/p>\nGoing Back<\/h3>\n
(one | two | auto)Pane.GoBack()<\/code> \n<\/p>\n<TouchableOpacity\r\n onPress={ () => onePane.GoBack() }>\r\n <Text>Press me to go back in our onePane stack<\/Text>\r\n<\/TouchableOpacity><\/pre>\n(one | two | auto)Pane.BackToHome()<\/code> \n<\/p>\n<TouchableOpacity\r\n onPress={ () => onePane.BackToHome() }>\r\n <Text>Press me to go back to our default pane in our onePane stack<\/Text>\r\n<\/TouchableOpacity><\/pre>\nReact Navigation<\/h3>\n
const App = () => {\r\n return (\r\n <TwoPaneApp \r\n onePaneDefault={ TwoPaneAppDefaultComponents.onePaneDefault }\r\n twoPaneDefault={ TwoPaneAppDefaultComponents.twoPaneDefault }\r\n config={ TwoPaneAppDefaultComponents.config }\r\n navigationContainer={ AppContainer() }\r\n \/>\r\n );\r\n};\r\nconst AppContainer = () => {\r\n return (\r\n <NavigationContainer>\r\n Pane Merging<\/h3>\n
isMerge = true<\/code> when you add your screen to the stack.\n<\/p>\nonePane.Add(\r\n 'NextExampleScreen',\r\n <NextExampleScreen \/>,\r\n header: {\r\n title: 'NextExampleScreen'\r\n },\r\n true\r\n);\r\n<\/pre>\n![\"ScreenMerge](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/09\/screenmerge-example.png\")
\n<\/p>\n![\"ScreenMerge](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/09\/screenmerge-example-1.png\")
\n<\/p>\nResources and feedback <\/h2>\n