Tablet dual pane support
On tablet in portrait mode it should be awesome to have a tab bar at the bottom and a 1/3 pane left with a list container and at the right side of this pane a 2/3 pane with the detail view of the selection of the list item from the 1/3 part. On tablet in landscape mode, the tab bar should be better aligned at the left of the screen, and still having the 1/3 + 2/3 screen pane ratio.
Actually, to be more clear it is a master(list) + detail layout.
I would love to use this 🚀
Does anyone have a working example of a custom navigator that accomplishes this in v5.0 (next)?
This guy seems to have got it working without a custom navigator: https://stackoverflow.com/questions/50293222/implementing-uisplitviewcontroller-using-react-navigation
Put together a quick basic implementation for a side bar nav for those who were asking:
Anyone interested in making a custom navigator as Brent Vatne suggested?
Shoot me an email at email@example.com and let's share the workload.
Theo Taylor: currently it is lower on our app feature list, from the moment we need it, we can team up? ;-)
Theo Taylor: Any news on this since June? Is there something in the making?
Daniel: Hey Daniel, we're focusing on web integration at the moment, once that's done we will be able to put out something.
it would be great to have someone implement this in a custom navigator! we don't have the bandwidth on the team (mostly just two of us working part time on react-navigation) to build all types of navigators. see https://reactnavigation.org/docs/en/community-fluidtransitions.html for an example of a custom navigator, https://reactnavigation.org/docs/en/custom-navigator-overview.html for info on how to build your own, and https://github.com/react-navigation/react-navigation-drawer to see how something like the drawer navigator is built.
I upvoted, but I ask to you all if actually there is a way to obtain this pattern
It could be made by using a drawer if I understood the problem, and such a feature only makes sense for tabs only.
I can't understand what you're describing from your description, without a clear example image. But I'm inclined to think it's not really a navigation feature and is likely already possible by putting views inside your routes or outside the Navigators.
Daniel Friesen: As I understand, this is the classical Master(list) + Detail view pattern. The trick is that this is incredibly intertwined with navigation when you want to support both phones & tablets with UI. I've been looking at this myself, and I think I would need to build a custom stack navigator to do this today. Then have each screen have a property like "can be presented stand-alone" / "isDetailView", so that the navigator knows how to present them / re-flow if the device size changes from tablet to phone. (Think switching to split screen on iPad, and sliding the window size from 3/4 of the iPad landscape to 1/4).
Frederic Barthelemy: Oh yes, the master/detail navigation pattern. We should have a separate navigator for that pattern like the drawer navigator is separate. However there are some suggestions that DrawerNavigator should be moved into a separate library, so perhaps this too should be separate.
Daniel Friesen: As I implemented it before, the Master-Detail was intertwined with the StackNavigator. -- I don't see a problem extracting it, but I don't understand what the thresh-hold is for Navigators that should be part of core and the ones that shouldn't!
I have a separate request for ReactXP support / more indirection so users can provide their own view & animation libs as a distinct concept from the Navigators themselves. -- maybe the overall theme is that we need to deepen the divide between library boundary layers, and then modularize several more modules?
Daniel Friesen: It is indeed intended to be a master(list) + detail view pattern implementation on Tablet. I updated the initial post.