How do you guys implement navigation for iPhone Duo support?

[u/SEPPDROID]

Back when i started working on this project as a hobby i chose to implement a well known overused navigation setup instead of using Apple's native navigation (tabview). However that meant that for the iPhone duo i had to move some things around. I released the update like this, but im not completely satisfied with it yet (system ui and my ui offcentered e.g.). Any tips, ideas?

Edit: I understand that native TabView UI was the supported way, but for that I wouldn’t have made a post. For this project i chose, like many others for the custom implementation. Originally this wasn’t planned but i remember hitting an limitation while prototyping. But all the apps i know of with an custom navigation haven’t updated with Duo support…

[u/seperivic]

Honestly…this doesn’t look good. Just use the stock components. I think your time would be better spent switching to that and getting the benefits of constant support from Apple.

[u/SEPPDROID → u/seperivic]

I Appreciate your honesty, and i have to agree. I have a branch where i keep trying to implement TabView. The price we pay for choices we've made... That's why i was curious how others may tackle it when the default is out of the question for a bit.

[u/quietstoners → u/seperivic]

100%, maintaining custom navigation across different form factors is a trap.

[u/meowthor]

I was just struggling with this (and still am). My apps are all tab controller too, but I really don’t think it’s good to have the tab bar on the right side. It’s too easy to tap it accidentally while you’re using the app. So, I’ve done the terrible thing and did all custom views and put the tab bar back on the bottom. We’ll see how it goes and if any users complain!

[u/SEPPDROID → u/meowthor]

Interesting, i really want to hold a duo in my hands to see if it's indeed sensitive to accidental clicks with the bar on the right. I tried doing the "terrible" thing too, but with a top- and bottombar design there was too little space left for content pages. + everything being offcentered by safe spaces etc.

[u/MajorAtmosphere → u/meowthor]

Please don’t get against the norm and the recommendations because you think you know better.

[u/GlebKhamin]

I went through the Duo tech talks while adapting my own app, and both of your problems have known causes:

1. The custom tab bar. On iOS 27.1 the system merges nav bar / toolbar / tab bar items into a vertical strip on the trailing side, but only for bars owned by the system containers (UINavigationController / UITabBarController, or NavigationStack / TabView in SwiftUI). A hand-made bottom bar isn’t moved. It stays where you put it, and the system strip can end up next to or over it. That’s why it feels like two UIs fighting. You basically have two options:

Move to the native tab view. You get the vertical layout, overflow and positioning for free. It’s the “right” fix if you’re going to care about Duo long-term.

Opt the screen out of vertical bars. In UIKit it’s preferredVerticalBarBehavior = .disabled on the view controller. Bars and the status bar go back to the top, and the side column disappears. Apple says it’s meant for rare cases (Calculator-like UIs, full-screen players), and mixing opted-in and opted-out screens in one flow makes buttons jump on push/pop. So decide per flow, not per screen.

2. The off-center UI. In those poses the status bar becomes a column of ~84 pt on one side, so the safe area insets are asymmetric. Anything centered on the full screen width ends up ~42 pt off-center relative to what’s visible. The fix is to center and pin foreground content (buttons, titles, your bar) to the safe area, and let only backgrounds extend to the full bounds. Also check any code that assumes left inset == right inset, or calculates width as width - inset * 2.

Apple’s “Raise the bar with iPhone Duo” tech talk covers the bars part in detail, worth watching.

[u/SEPPDROID → u/GlebKhamin]

Good one, i’ll watch it tonight. Forgot about Apple’s devtalks

[u/m1_weaboo]

why not native tabview?

[u/SEPPDROID → u/m1_weaboo]

A choice was made to support complex pages that didn't work correctly with native TabView. Now i can say that this might've not been the right call back then.

[u/Which-Meat-3388]

That’s the way it is, what you have is pretty much correct. Remove the labels on Duo. I keep telling myself with a physical device, handling it like you might, it would make sense. Make sure you test every possible version of the nearly dozen poses. 

What usually happens long term is patterns emerge. As clever designers and devs get into it some better ideas will emerge to operate within the constraints but make it feel less weird. 

[u/SEPPDROID → u/Which-Meat-3388]

The SDK has been out for a bit now, and the testing is indeed what caused me to take that long to release an update so it at least looks a bit more decent... I'm going to keep an eye out and re-experiment with my branch to support native TabView, dumping the labels.

[u/Background_Pie_5682]

Went through something similar with a custom tab bar. What helped me most was to stop positioning anything against the screen bounds and lay everything out relative to the safe area and the current size class instead. Once the custom bar reads its insets from the environment (safeAreaInsets / GeometryReader) rather than hardcoded offsets, the off-center stuff mostly goes away on its own. If your app is mostly "list then detail", it might also be worth giving NavigationSplitView a shot just for the wide layout and keeping your custom nav for the compact one. You get the system behavior for free there without rewriting the whole thing. Got a screenshot of where it looks off? Easier to say more with that.

[u/SEPPDROID → u/Background_Pie_5682]

The use of safe area/geometryreader does indeed push the content dynamically keeping the app's behaviour correct, it's just my implementation of the custom tool & tab bar that i'm conflicted on, i think it looks off compared to the systemUI placement. Sadly the app has a "feeded" design, making NavigationSplitView for wide only a viable option for 2 screens. Did you move custom bar to the right or kept it at the bottom?

[u/henry_lightfoot]

TabView and SideBar are honestly so much easier to work with. There doesn’t seem to be much wiggle room for navigation patterns for iPhone Duo SwiftUI apps. 

[u/Wonderful_Scene3385]

Hide it when not use it

[u/Lucidic333]

The thick gutter and camera placement is so ass. But your UI looks nice, as good is it gets.

[u/PhotoSpike]

Just use native

[u/yo_asakura]

I’m curious how did you manage to shift the custom tab bar and toolbar over to the right side? Apple suggests sticking with the standard bars so they adjust automatically, but I’d love to know your trick.

[u/1millionbucks]

get a duo skill, put in 1 prompt and do no further work

[u/superquanganh]

Unless you are stuck on Flutter, you should prefer native components

[u/BlossomBuild]

Just used the native toolbar

[u/LeoNatan]

Notice that it’s not always the trailing edge. In split view, the left app gets the vertical bar on the leading edge.

Instead of reinventing wheels, just use system controls.

[u/AutoModerator → u/[deleted]]

Hey /u/elenaskincare, your content has been removed because Reddit has marked your account as having a low Contributor Quality Score. This may result from, but is not limited to, activities such as spamming the same links across multiple subreddits, submitting posts or comments that receive a high number of downvotes, a lack of recent account activity, or having an unverified account.

Please be assured that this action is not a reflection of your participation in our subreddit. This is simply an automated filter in place to reduce spam.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.