TextEditor in SwiftUI

DevTechie Inc
Jan 6, 2023

TextEditor came to SwiftUI with the release of iOS 14. It allows us to display and write multi-line scrollable text. We create TextEditor by Binding it to a string variable.

Let’s work on an example.

struct DevTechieTextEditorExample: View {
    @State private var text = "Learn iOS Development with DevTechie.com"
    var body: some View {
        NavigationStack {
            TextEditor(text: $text)
                .padding()
                .navigationTitle("DevTechie")
        }
    }
}
By default, TextEditor view styles the text using characteristics inherited from the environment.

For example, Font:

struct DevTechieTextEditorExample: View {
    @State private var text = "Learn iOS Development with DevTechie.com"
    var body: some View {
        NavigationStack {
            TextEditor(text: $text)
                .font(.title)
                .padding()
                .navigationTitle("DevTechie")
        }
    }
}
ForegroundColor:

struct DevTechieTextEditorExample: View {
    @State private var text = "Learn iOS Development with DevTechie.com"
    var body: some View {
        NavigationStack {
            TextEditor(text: $text)
                .font(.title)
                .foregroundColor(.orange)
                .padding()
                .navigationTitle("DevTechie")
        }
    }
}
MultilineTextAlignment:

struct DevTechieTextEditorExample: View {
    @State private var text = "Learn iOS Development with DevTechie.com"
    var body: some View {
        NavigationStack {
            TextEditor(text: $text)
                .font(.title)
                .foregroundColor(.orange)
                .multilineTextAlignment(.trailing)
                .padding()
                .navigationTitle("DevTechie")
        }
    }
}
We can specify line spacing between TextEditor text by using lineSpacing modifier.

struct DevTechieTextEditorExample: View {
    @State private var text = "Learn iOS Development with DevTechie.com"
    var body: some View {
        NavigationStack {
            TextEditor(text: $text)
                .font(.title)
                .foregroundColor(.orange)
                .multilineTextAlignment(.center)
                .lineSpacing(20)
                .padding()
                .navigationTitle("DevTechie")
        }
    }
}
We can use textInputAutocapitalization modifier to control how often the shift key in the keyboard is automatically enabled. Available options are characters, words, sentences or never.

struct DevTechieTextEditorExample: View {
    @State private var text = "Learn iOS Development with DevTechie.com"
    var body: some View {
        NavigationStack {
            TextEditor(text: $text)
                .font(.title)
                .foregroundColor(.orange)
                .multilineTextAlignment(.center)
                .lineSpacing(20)
                .textInputAutocapitalization(.characters)
                .padding()
                .navigationTitle("DevTechie")
        }
    }
}
In order to change background color of TextField we have to hide the existing background color. We can do that by setting UITextView’s background color to clear color during view initialization for SwiftUI 3 or lower versions.

UITextView.appearance().backgroundColor = .clear
Or starting iOS 16 and SwiftUI 4, we can use scrollContentBackground modifier to set the background as hidden .

struct DevTechieTextEditorExample: View {
    @State private var text = "Learn iOS Development with DevTechie.com"
    
    @State private var showNavigator = true
    
    var body: some View {
        NavigationStack {
            TextEditor(text: $text)
                .scrollContentBackground(.hidden)
                .padding()
                .foregroundColor(.white)
                .background(Color.orange)
                .frame(width: 300, height: 200)
                .cornerRadius(20)
                
                .navigationTitle("DevTechie")
        }
    }
}
With that we have reached the end of this article. Thank you once again for reading. Don’t forget to follow 😍. Also subscribe our newsletter at https://www.devtechie.com
Like