Search code examples
firebasegoogle-cloud-firestoretextswiftuimultiline

Swiftui Firebase paragraghs and line breaks in text uploaded to Firestore


I have checked around Stack overflow and online couldnt find any answer for Swiftui. I am manually uploading content to Firestore and fetching it in my app in article format, when i retrieve my data in the app the article comes squished together without line breaks and paragraphs. I tried using \n\n which works in json files, it did not work and came out as text. Below is my fetch function:

func fetchHotspots() {
        let fb = Firestore.firestore()
        
        fb.collection("hotspots").getDocuments { snapshot, error in
            if error == nil {
                if let snapshot = snapshot {
                    DispatchQueue.main.async {
                        self.hotspots = snapshot.documents.map { h in
                            return HotSpots(id: h.documentID,
                                hotid: h["hotid"] as? String ?? "",
                                uid: h["uid"] as? String ?? "",
                                imageUrl: h["imageUrl"] as? String ?? "",
                                name: h["name"] as? String ?? "",
                                location: h["location"] as? String ?? "",
                                countryName: h["countryName"] as? String ?? "",
                                countryFlagUrl: h["countryFlagUrl"] as? String ?? "",
                                phonenumber: h["phonenumber"] as? String ?? "",
                                info: h["info"] as? String ?? "",
                                likes: h["likes"] as? Int ?? 0)
                        }
                        
                    }
                }
            } else {
                
            }
        }
        print("DEBUG: printing hotspots list of \(hotspots)")
    }

The article is in the "info" variable which i have in a TextView below:

VStack(alignment: .center, spacing: 3) {
                    Text(viewModel.hotspot.info)
                        .font(.system(size: 12))
                }

This is an example article that i have in the info variable:

Buckingham Fountain is a Chicago Landmark in the center of Grant Park, and between Queen's Landing and Congress Parkway. Dedicated in 1927, it is one of the largest fountains in the world. The crown jewel of Grant Park is fit for a king — literally. The design was inspired by one of the ornate fountains at the Palace of Versailles in France, built for Louis XV.

It just happens to be double the size of the original, making it one of the largest fountains in the world. The size is meant to symbolize the enormity of nearby Lake Michigan and uses as much as 15,000 gallons of water per minute. At dusk, Buckingham Fountain comes to life. Head to the park after sunset and you’ll be treated to a spectacular light and music show every hour on the hour. If you’re there during the day, don’t miss the hourly, 20-minute water show featuring the fountain’s center jet shooting water 150 feet into the air. The fountain is active from May through mid-October.

Opened to the public in 1927, Buckingham Fountain was commissioned by avid art collector and philanthropist Kate Sturges Buckingham as a memorial for her brother Clarence. The “wedding cake” design was the work of architect Edward H. Bennett, while the fountain’s sculptures — including four sets of Art Deco-style seahorses representing the four states bordering Lake Michigan — were created by French artist Marcel Loyau, who won the Prix National at the 1927 Paris Salon for the project.

It should have 3 paragraghs but instead the firebase output is like this:

Buckingham Fountain is a Chicago Landmark in the center of Grant Park, and between Queen's Landing and Congress Parkway. Dedicated in 1927, it is one of the largest fountains in the world. The crown jewel of Grant Park is fit for a king — literally. The design was inspired by one of the ornate fountains at the Palace of Versailles in France, built for Louis XV. It just happens to be double the size of the original, making it one of the largest fountains in the world. The size is meant to symbolize the enormity of nearby Lake Michigan and uses as much as 15,000 gallons of water per minute. At dusk, Buckingham Fountain comes to life. Head to the park after sunset and you’ll be treated to a spectacular light and music show every hour on the hour. If you’re there during the day, don’t miss the hourly, 20-minute water show featuring the fountain’s center jet shooting water 150 feet into the air. The fountain is active from May through mid-October. Opened to the public in 1927, Buckingham Fountain was commissioned by avid art collector and philanthropist Kate Sturges Buckingham as a memorial for her brother Clarence. The “wedding cake” design was the work of architect Edward H. Bennett, while the fountain’s sculptures — including four sets of Art Deco-style seahorses representing the four states bordering Lake Michigan — were created by French artist Marcel Loyau, who won the Prix National at the 1927 Paris Salon for the project.


Solution

  • With @jnpdx answer this is the solution to the question:

     Text(viewModel.hotspot.info.replacingOccurrences(of: "[br]", with: "\n\n"))
      
    

    Then go to your articles you upload to Firebase and put "[br]" wherever you want line breaks like below.

    Buckingham Fountain is a Chicago Landmark in the center of Grant Park, and between Queen's Landing and Congress Parkway. Dedicated in 1927, it is one of the largest fountains in the world. The crown jewel of Grant Park is fit for a king — literally. The design was inspired by one of the ornate fountains at the Palace of Versailles in France, built for Louis XV. It just happens to be double the size of the original, making it one of the largest fountains in the world. The size is meant to symbolize the enormity of nearby Lake Michigan and uses as much as 15,000 gallons of water per minute. [br]At dusk, Buckingham Fountain comes to life. Head to the park after sunset and you’ll be treated to a spectacular light and music show every hour on the hour. If you’re there during the day, don’t miss the hourly, 20-minute water show featuring the fountain’s center jet shooting water 150 feet into the air. The fountain is active from May through mid-October. Opened to the public in 1927, Buckingham Fountain was commissioned by avid art collector and philanthropist Kate Sturges Buckingham as a memorial for her brother Clarence. [br]The “wedding cake” design was the work of architect Edward H. Bennett, while the fountain’s sculptures — including four sets of Art Deco-style seahorses representing the four states bordering Lake Michigan — were created by French artist Marcel Loyau, who won the Prix National at the 1927 Paris Salon for the project.