Search code examples
iosswiftswiftuiuilabel

How can I get text to wrap in a UILabel (via UIViewRepresentable) without having a fixed width?


Setting lineBreakMode to byWordWrapping and set numberOfLines to 0 does not seem to be sufficient:

struct MyTextView: UIViewRepresentable {
    func makeUIView(context: Context) -> UILabel {
        let label = UILabel()
        label.lineBreakMode = .byWordWrapping
        label.numberOfLines = 0
        label.text = "Here's a lot of text for you to display. It won't fit on the screen."
        return label
    }

    func updateUIView(_ view: UILabel, context: Context) {
    }
}

struct MyTextView_Previews: PreviewProvider {
    static var previews: some View {
        MyTextView()
            .previewLayout(.fixed(width: 300, height: 200))
    }
}

The text does not wrap, regardless of which setting I use for lineBreakMode. The canvas preview and live preview both look like this:

Screenshot of the text not wrapping

The closest I've gotten is setting preferredMaxLayoutWidth, which does cause the text to wrap, but there doesn't seem to be a value that means "whatever size the View is".


Solution

  • Possible solution is to declare the width as a variable on MyTextView:

    struct MyTextView: UIViewRepresentable {
    
        var width: CGFloat
    
        func makeUIView(context: Context) -> UILabel {
            let label = UILabel()
            label.lineBreakMode = .byWordWrapping
            label.numberOfLines = 0
            label.preferredMaxLayoutWidth = width
            label.text = "Here's a lot of text for you to display. It won't fit on the screen."
            return label
        }
    
        func updateUIView(_ view: UILabel, context: Context) {
        }
    }
    

    and then use GeometryReader to findout how much space there is avaible and pass it into the intializer:

    struct ExampleView: View {
    
        var body: some View {
            GeometryReader { geometry in
                MyTextView(width: geometry.size.width)
            }
        }
    }