Make TextEditor dynamic height SwiftUI

user_4857298 0
Viewed 1147

I'm trying to create a growing TextEditor as input for a chat view.

The goal is to have a box which expands until 6 lines are reached for example. After that it should be scrollable.

I already managed to do this with strings, which contain line breaks \n.

                        TextEditor(text: $composedMessage)
                            .onChange(of: self.composedMessage, perform: { value in
                                withAnimation(.easeInOut(duration: 0.1), {
                                    if (value.numberOfLines() < 6) {
                                        height = startHeight + CGFloat((value.numberOfLines() * 20))
                                    }
                                    if value.numberOfLines() == 0 || value.isEmpty {
                                        height = 50
                                    }
                                })
                            })

I created a string extension which returns the number of line breaks by calling string.numberOfLines() var startHeight: CGFloat = 50

The problem: If I paste a text which contains a really long text, it's not expanding when this string has no line breaks. The text get's broken in the TextEditor.

How can I count the number of breaks the TextEditor makes and put a new line character at that position?

swiftui dynamic height text string
2 Answers

I found a solution!

For everyone else trying to solve this:

I added a Text with the same width of the input field and then used a GeometryReader to calculate the height of the Text which automatically wraps. Then if you divide the height by the font size you get the number of lines.

You can make the text field hidden (tested in iOS 14 and iOS 15 beta 3)

user_48572980

Here's a solution adapted from question and answer,

struct ChatView: View {
    @State var text: String = ""

    // initial height
    @State var height: CGFloat = 30

    var body: some View {
        ZStack(alignment: .topLeading) {
            Text("Placeholder")
                .foregroundColor(.appLightGray)
                .font(Font.custom(CustomFont.sofiaProMedium, size: 13.5))
                .padding(.horizontal, 4)
                .padding(.vertical, 9)
                .opacity(text.isEmpty ? 1 : 0)

            TextEditor(text: $text)
                .foregroundColor(.appBlack)
                .font(Font.custom(CustomFont.sofiaProMedium, size: 14))
                .frame(height: height)
                .opacity(text.isEmpty ? 0.25 : 1)
                .onChange(of: self.text, perform: { value in
                    withAnimation(.easeInOut(duration: 0.1), {
                        if (value.numberOfLines() < 6) {
                            // new height
                            height = 120
                        }
                        if value.numberOfLines() == 0 || value.isEmpty {
                            // initial height
                            height = 30
                        }
                    })
                })
        }
        .padding(4)
        .overlay(
            RoundedRectangle(cornerRadius: 8)
                .stroke(Color.appLightGray, lineWidth: 0.5)
        )
    }

}

And the extension,

extension String {
    func numberOfLines() -> Int {
        return self.numberOfOccurrencesOf(string: "\n") + 1
    }

    func numberOfOccurrencesOf(string: String) -> Int {
        return self.components(separatedBy:string).count - 1
    }

}
user_83623160
Related