SwiftUI Section header - use non uppercase?

Question

Creating a List as follows:

struct ContentView: View {
    var body: some View {
        List {
            Section(header: Text("Header")) {
                Text("Row 1")
                Text("Row 2")
            }
        }
        .listStyle(PlainListStyle())
    }
}

uses uppercase text in the section header.

Is there a way to force the header text to be retain its original case?

Your code works as expected in Xcode 11.5, iOS 13. Section header is "*Header*" (capitalised but not uppercased). — pawello2222, Jul 06 '20 at 09:56
Tested it in Simulator with Xcode 11.5 and it shows "Header" — davidev, Jul 06 '20 at 09:58
Ah, you're right, thanks - looks like an Xcode 12 beta issue — Ashley Mills, Jul 06 '20 at 10:02
Appears when Section is wrapped in a Form or List, the header is automatically styled with uppercase, colour .secondary and aligned left; if it's only in a VStack or Navigation, it's styled capitalised, colour .primary and aligned centre. Xcode 12.5, iOS 14.5 — TimD, Jun 24 '21 at 13:54

score 97 · Accepted Answer · answered Aug 01 '20 at 05:18

97

There's a textCase(nil) modifier on Section that honours the original text case, which works on iOS 14

From Apple's developer forums: https://developer.apple.com/forums/thread/655524

Section(header: Text("Section Title")) {
    [...]
}.textCase(nil)

answered Aug 01 '20 at 05:18

axes78

986
6
2

I've postet an answer below that tries to mitigate the `#available(iOS 14.0, *)` issue! Otherwise, this is exactly the way I went as well. – TurboFish Oct 16 '20 at 11:49
6

You can also call textCase on header directly instead of on Section – onmyway133 Feb 17 '21 at 21:59
1

Perfect! Also work on iOS 15.5 – grenos Jun 02 '22 at 11:10

score 21 · Answer 2 · answered Sep 23 '20 at 20:06

For a solution that works with both iOS 13 and 14, you can make a custom modifier that only sets the textCase for iOS 14:

struct SectionHeaderStyle: ViewModifier {
    func body(content: Content) -> some View {
        Group {
            if #available(iOS 14, *) {
                AnyView(content.textCase(.none))
            } else {
                content
            }
        }
    }
}

And then you can apply it to your section like this:

Section(header: Text("Section Name")) {
 ...
}.modifier(SectionHeaderStyle())

This is an adapted version of a suggestion from apple forums: https://developer.apple.com/forums/thread/650243

Shouldn't this be applied to Text("Section Name") instead of the whole section? — retendo, Sep 25 '20 at 07:40

score 5 · Answer 3 · answered Oct 16 '20 at 11:48

I would like to add my solution which I find very convenient dealing with this issue. I simply made a custom text component that I use for section headers.

import SwiftUI

struct SectionHeaderText: View {
    var text: String

    var body: some View {
        if #available(iOS 14.0, *) {
            Text(text).textCase(nil)
        } else {
            Text(text)
        }
    }
}

I then use it like this:

Section(header: SectionHeaderText(text: "Info"), ...

Mitigates the whole situation with #available(iOS 14.0, *) and gets me the result I want :) Maybe this helps someone out there!

Andy Jazz · Answer 4 · 2023-04-25T10:33:03.440

List's Style in iOS 16.4

In iOS 16.4, .plane and .inset type properties do provide the expected behavior:

struct ContentView : View {
    var body: some View {
        List {
            Section(header: Text("Header")) {
                Text("Row 1")
                Text("Row 2")
            }
        }
        .listStyle(.plain)
        // .listStyle(.inset)
    }
}

.plane and .inset properties help you retain the original letters' case:

List Style	Text Appearance	Extra Features
.automatic	HEADER	–
.grouped	HEADER	–
.inset	Header	–
.insetGrouped	HEADER	–
.plain	Header	section header's BG color is .clear
.sidebar	HEADER	section's disclosure indicator

SwiftUI Section header - use non uppercase?

4 Answers4

List's Style in iOS 16.4

Linked