How to display the HTML text in SwiftUI

Question

My requirement is to display the text in SwiftUI which contains the HTML tags. I tried with the approach of using the WKWebKit::Loadhtml which works fine . However, I have the requirement of displaying it something like this. A collection of person card

Person card:- Name Title

Person details details which has HTML text e.gHello world

Can someone suggest a way to solve this in SwiftUI.

Refer to the post as well but no luck

How to show HTML or Markdown in a SwiftUI Text?

Literally the post you link to shows you how to use UIViewRepresentable to wrap a WKWebView in a SwiftUI.View. What did you try and what error are you getting? — Josh Homann, Jan 14 '20 at 07:02
I was looking for an example how to use UIViewRepresentable with an UILabel and attributedText.However, I think deriving a class using the WKWebView solves the issue. Incase if you have pointers how can i implement the UIViewRepresentable then let me know. — DJ-, Jan 20 '20 at 00:00
I am working on a blog which could help lot of people like me — DJ-, Mar 23 '20 at 00:12

score 4 · Answer 1 · answered Jul 23 '21 at 11:47

There are a range of ways to display HTML text in SwiftUI. However I found some issues to use them. Interfacing UILabel and using NSAttributedText only enable us to display small size string moreover WKWebView restrict to use desirable font. Considering all of these, I found using UITextView with NSAttributedText is more convenient to display HTML text in SwiftUI. The code is following

import UIKit
import SwiftUI

struct HTMLFormattedText: UIViewRepresentable {

   let text: String
   private  let textView = UITextView()

   init(_ content: String) {
      self.text = content
   }

   func makeUIView(context: UIViewRepresentableContext<Self>) -> UITextView {
      textView.widthAnchor.constraint(equalToConstant:UIScreen.main.bounds.width).isActive = true
      textView.isSelectable = false
      textView.isUserInteractionEnabled = false
      textView.translatesAutoresizingMaskIntoConstraints = false
      textView.isScrollEnabled = false
      return textView
  }

  func updateUIView(_ uiView: UITextView, context: UIViewRepresentableContext<Self>) {
     DispatchQueue.main.async {
         if let attributeText = self.converHTML(text: text) {
             textView.attributedText = attributeText
         } else {
             textView.text = ""
         }

     }
  }

  private func converHTML(text: String) -> NSAttributedString?{
      guard let data = text.data(using: .utf8) else {
          return nil
      }

      if let attributedString = try? NSAttributedString(data: data, options: [.documentType: NSAttributedString.DocumentType.html], documentAttributes: nil) {
          return attributedString
      } else{
          return nil
      }
  }
}

struct ContentView: View {    
    var body: some View {
       HTMLFormattedText("<p>Danish-made 1st class kebab</p><p><br></p><p>Say yes thanks to 2kg. delicious kebab, which is confused and cooked.</p><p><br></p><p>Yes thanks for 149.95</p><p><br></p><p>Now you can make the most delicious sandwiches, kebab mix and much more at home</p>")        
    }
}

Here height will increase automatically based on the size of content as well as width also. More detail is available on this GitHub link: https://github.com/tmusabe/HTMLFormattedText-SwiftUI

Thank you. This is the only code in all stackoverflow that works for me! — swifthing, Aug 18 '21 at 19:42

How to display the HTML text in SwiftUI

1 Answers1

Linked