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?

Answer 1

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)

Answer 2

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

Answer 3

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!