How to preserve NavigationLink styling within List of buttons?

[rzulkoski]

The last few episodes related to navigation in SwiftUI have been awesome, but every time a Button was employed within a list it made me uneasy. Ideally, we could preserve the styling that NavigationLink gives us. In the last episode you guys even imagined a theoretical .buttonStyle(.navigationLink), which would be amazing but I'm not holding my breathe on Apple to give it to us soon if ever.

My question is, what would you recommend if someone wants to preserve that style while moving to Button? Do you think everything could be accomplished using a custom ButtonStyle? If so, should this library ship with one?

I'm thinking about things like:

• Disclosure indicators
• Highlighted/Selected states
• Padding

[mbrandonw]

Hi @rzulkoski, it definitely is a bummer. @tgrapperon has done a lot of work investigating a .navigation button style, and he can speak to the ups and downs during that process.

However, there is a quick "hack" one can do to use NavigationLink. You can just wrap it in a .borderless button:

Button {
  self.model.buttonTapped()
} label: {
  NavigationLink(value: UUID()) {
    Text("Go to screen")
  }
}
.buttonStyle(.borderless)

And you can further style the button in anyway you want.

It's not so bad, and maybe we can even package it up in a nice API for the library some day. Or at the very least, document this pattern.

[tgrapperon]

Hey @rzulkoski! This is indeed something lacking with the current official API's. It is relatively straightforward to build something that will look like a NavigationLink with a chevron at rest, using Brandon's trick, or an explicit ButtonStyle. It is however very tricky to produce something that behaves idiomatically.

My most promising results were obtained doing the opposite of Brandon's suggestion, that is putting a Button in the NavigationLink's Label. I've posted them in the form of a self-contained gist. This is relatively hackish, but so is this ButtonStyle approach from earlier this year or more recently. In both cases, it works reliably only on iOS, as we're able to introspect the UIKit layer. It seems that they changed the way how it's done on macOS, and I wasn't able to produce results that would exactly match the original. Furthermore, there are small changes from one OS version to the other.

So at the end of the day, I'm not 100% sure about the way to handle this problem. It is possible that something can be done, but it will require a considerable amount of work if one wants it to work across many platforms/os versions. I don't know if it's worth it, and if so, how far should we want to match the original features.

Because we have more control/insight over the state of the application when using TCA, I decided to postpone work on this feature until TCA's navigation API settles. But it doesn't mean that nothing can be done in the meantime! Feel free to comment if you have new ideas to tackle the problem!

[tgrapperon]

After a suggestion from @stephencelis, I gave the problem another go, based on @mbrandonw's NavigationLink in Button's Label approach.

So far, the most reliable in terms of behavior/supported platforms seem to be talking directly to the UIKit/AppKit layer. I've gathered a simple .navigation button style that works on iOS and macOS here (I only checked latests OS versions yet). This approach is unfortunate, but likely the one that gives the most control about what's going on.

There are at least two questions:

• Should we control the "isSelected" state? I think so. There are various ways to achieve this, but the simplest is likely to expose a optional Binding<Bool>. Right now, highlighting is not controlled and completely depends on the button being pressed or not.
• Should we highlight in the same way as we select? I don't think so, even if it's the current behavior in the gist. I think that these buttons should only dim on press (like standard buttons), and select the whole row only on navigation. They currently select whole the row on press and navigation, but I'm not sure this is a nice UX. The built-in variant always (and immediately) navigates on release, so the row keeps its highlighted/selected state from press. But in our case, it flickers the whole row and then re-select it again when navigation happens (provided we control this).

Please let me know what you think!

[rzulkoski]

A few updates:

• After getting a bit further with using navigation links and running into some of the pain points that you and the folks at PointFree have pointed out, I have come around on wanting to use buttons.
• Seeing the example in your post from Nov 23 as well as doing some of my own experimentation with ButtonStyle has greatly increased my confidence in being able to provide a great experience.
• I'm not ready to give my thoughts on your questions yet, but I really appreciate your thoughtful efforts in this area. Keep up the great work!