Recreating the iOS Chat Bubble with the Tail using SwiftUI

Learn how to recreate the iMessage Chat Bubble with Tail using SwiftUI

https://i.pinimg.com/originals/35/ef/14/35ef1465616a649b5c7c7303f40057a6.png

I wrote these little pieces of code using Swift with Swift Playgrounds on an iPad.

Code

import SwiftUI
import PlaygroundSupport

struct Screen: View {
    var body: some View {
        VStack {
            HStack {
                Spacer()
                Text("Here’s to the crazy ones, the misfits, the rebels, the troublemakers, the round pegs in the square holes… the ones who see things differently — they’re not fond of rules…").padding().background(Color(UIColor.systemBlue)).clipShape(BubbleShape(myMessage: true)).foregroundColor(.white)
            }.padding(.leading, 55).padding(.vertical, 10)
            
            HStack {
                Text("You can quote them, disagree with them, glorify or vilify them, but the only thing you can’t do is ignore them because they change things…").padding().foregroundColor(.primary).background(Color.secondary.opacity(0.2)).clipShape(BubbleShape(myMessage: false))
                Spacer()
            }.padding(.trailing, 55).padding(.vertical, 10)
        }.padding(.horizontal, 15)
    }
}

struct BubbleShape: Shape {
    var myMessage : Bool
    func path(in rect: CGRect) -> Path {
        let width = rect.width
        let height =…