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.
Basile Bruneau
It's a pattern that is so common on iPad (just take the Settings app for example), it's really an issue when developing a tablet app today with React Navigation. The fact that it's the number 2 feature request is no surprise!
The native class is the following: https://developer.apple.com/documentation/uikit/uisplitviewcontroller
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.
Load More
→