SwiftUI Section header - use non uppercase? - swiftui

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!