How Can I Wrap Text in a SwiftUI NavigationButton?

Question

SwiftUI's Text type has a modifier that allows text to wrap if the text is too long to fit horizontally within its container. To achieve text wrapping, simply pass nil as the argument to the lineLimit modifier:

Text("This text is too long to fit horizontally within its non-NavigationButton container. Therefore, it should wrap to fit, and it does.")
    .font(.body)
    .lineLimit(nil)

The above works as expected, except for when used inside of a SwiftUI NavigationButton. All Text instances that I have nested within NavigationButton instances do not wrap:

NavigationButton(destination: DestinationView()) {
    Text("This text is too long to fit horizontally within its NavigationButton container. Therefore, it should wrap to fit, but it does not.")
        .font(.body)
        .lineLimit(nil)
}

Is there anything that I am missing from the code above that would allow Text instances to wrap within NavigationButton instances?

Edit to add more context:

The initial view is a List that is wrapped in a NavigationView. The List contains instances of MeasurableItemsListItem, which are wrapped in NavigationButton instances that trigger navigation to a secondary view that is added to the navigation stack:

struct MeasurableItemsList : View {

    private let measurableItems = MeasurableItem.allCases

    var body: some View {
        NavigationView {
            List(measurableItems.identified(by: \.self)) { measurableItem in
                NavigationButton(destination: DosableFormsList(measurableItem: measurableItem)) {
                    MeasurableItemsListItem(measurableItem: measurableItem)
                }
            }
        }
    }
}

Each list item that is wrapped in a NavigationButton is made from the following structure:

struct MeasurableItemsListItem : View {

    let measurableItem: MeasurableItem

    var body: some View {
        Text(measurableItem.name)
            .font(.body)
            .foregroundColor(.primary)
            .lineLimit(nil)
    }

}

Hi Nick can you give us some context? did you add the NavigationButton inside a row of List? or inside a Stack? — Giuseppe Sapienza, Jun 27 '19 at 16:13
Hi, @GiuseppeSapienza. I have provided an edit to give additional context about the configuration of my views. — Nick Kohrn, Jun 27 '19 at 17:56

score 3 · Accepted Answer · answered Oct 11 '19 at 22:35

3

You might be helped with this answer: https://stackoverflow.com/a/56604599/30602

The summary is that inside other Builders you need to add .fixedSize(horizontal: false, vertical: true) to your Text() to get it to wrap.

answered Oct 11 '19 at 22:35

Wil Shipley

9,343
35
59

That solved it! I vaguely recall seeing that modifier before, and I’m not sure why it didn’t cross my mind in this situation. Thank you! – Nick Kohrn Oct 12 '19 at 23:20

score 0 · Answer 2 · answered Sep 07 '19 at 20:09

You don't need to use NavigationButton to achieve navigation. You can achieve it by using NavigationLink easily, wherein you don't need to wrap your views inside NavigationButton. Check this ANSWER which is explaining the usage of NavigationLink without wrapping view inside it. I hope it helps. P.S.- i don't have enough reputation points to add this as a comment. Thanks

How Can I Wrap Text in a SwiftUI NavigationButton?

2 Answers2