105
Tablet dual pane support
Jo Somers
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.
F
Flam3rboy
I would love to use this 🚀
David Narbutovich
Matt Goodwin
Does anyone have a working example of a custom navigator that accomplishes this in v5.0 (next)?
Ca-Phun Ung
This guy seems to have got it working without a custom navigator: https://stackoverflow.com/questions/50293222/implementing-uisplitviewcontroller-using-react-navigation
Theo Taylor
Put together a quick basic implementation for a side bar nav for those who were asking:
Theo Taylor
Anyone interested in making a custom navigator as Brent Vatne suggested?
Shoot me an email at theotaylor@taylord.tech and let's share the workload.
Jo Somers
Theo Taylor: currently it is lower on our app feature list, from the moment we need it, we can team up? ;-)
Daniel
Theo Taylor: Any news on this since June? Is there something in the making?
Theo Taylor
Daniel: Hey Daniel, we're focusing on web integration at the moment, once that's done we will be able to put out something.
Brent Vatne
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.
Realtebo
I upvoted, but I ask to you all if actually there is a way to obtain this pattern
Harshul Sharma
It could be made by using a drawer if I understood the problem, and such a feature only makes sense for tabs only.
Daniel Friesen
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.
Frederic Barthelemy
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).
Daniel Friesen
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.
Frederic Barthelemy
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?
Jo Somers
Daniel Friesen: It is indeed intended to be a master(list) + detail view pattern implementation on Tablet. I updated the initial post.
Load More
→