Microsoft Releases TwoPane-Navigation Module

TwoPane-Navigation library allows developers to work side by side with the react-navigation library.

Recently, Microsoft released a new React Native dual-screen navigation module. This module is for JavaScript and TypeScript to make it easier to manage component states and move apps around on dual-screen devices.
 
TwoPane-Navigation library is built for React Native developers working on multi-screen phones and devices. This module allows you to work side by side with the react-navigation library or work on its own as a replacement.
 
Well, the TwoPane-Navigation library leverages Redux. It is built around the core concept of viewing each pane on your dual-screen device as its own stack and rendering the top element of the stack as the current page.
 
 
Source: Microsoft
 
You must have the new TwoPaneApp as the base for your React Native application and should have the following properties:
  • onePaneDefault, will be the base pane you want when your application is in onePane View
  • twoPaneDefault, will be the base pane you want when your application is in twoPane View
  • config?, to override default values for your application
  • navigationContainer?, will work as AppContainer if using React Navigation
Using React Navigation with the twopane-navigation library is very simple. You will need to create all the StackNavigators,SwitchNavigators,DrawerNavigators,etc.... and pass the appContainer into the navigationContainer prop in the TwoPaneApp Component. Then you can access the navigation/route objects with the useNavigation/useRoute hooks.
 
To learn more, you can visit the official announcement.