Disable the uppercase text style for section headers in SwiftUI Lists

In this tutorial, we will see how to disable the uppercase text style for section headers in SwiftUI Lists.

When we use the List view and add section headers, they usually appear in uppercase letters by default. Even if we write the headers in lowercase, they still appear in uppercase. But sometimes, we want them to display exactly as we typed them, without automatically converting them to uppercase.

Now, have a look at the methods below to achieve this task.

Using textCase modifier with nil value

We can achieve this using the textCase() modifier by setting the value to nil within this modifier.

Syntax

.textCase(nil)

This modifier will change the appearance of the text, like making it uppercase or lowercase. When we set the value to nil it means we are not forcing any specific style on the text.

So, the section headers will appear as we type them, without automatically becoming uppercase.

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                Section {
                    Text("Bluetooth")
                    Text("Mobile Data")
                } header: {
                    Text("Network")
                        .textCase(nil) //Opting out of default uppercase text style
                }
                
                Section {
                    Text("Display")
                    Text("Keyboard")
                } header: {
                    Text("General")
                }
            }
            .navigationTitle("Settings")
        }
    }
}

In the above program, I have applied the .textCase(nil) modifier to the first section header (Network). So, this section header will be displayed exactly as I specified without converting to uppercase.

But the second section header (General) will be displayed in uppercase.

Output:

As we can see in the above output, the first section header remains the same as provided but the second section header is converted to uppercase.

Using textCase modifier with .lowercase value

We can also use the .lowercase value within the textCase() modifier, as we do with a Text view, to convert text to lowercase.

Syntax

.textCase(.lowercase)

If we use this modifier, there will be a little issue, as it will lowercase all the letters, including the first letter.

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                Section {
                    Text("Bluetooth")
                    Text("Mobile Data")
                } header: {
                    Text("Network")
                        .textCase(nil) //Opting out of default uppercase text style
                }
                
                Section {
                    Text("Display")
                    Text("Keyboard")
                } header: {
                    Text("General")
                        .textCase(.lowercase) //Change the text case of the header to lowercase
                }
            }
            .navigationTitle("Settings")
        }
    }
}

Output:

As we can see in the above output, it lowercase all the letters, including the first letter.