Let’s recreate the Messages App - Part III (Chat Bubble) using SwiftUI and Swift Playgrounds on iPad.

Video

Code

View code on GitHub

Final Result

Notes:

Video tutorial only covers drawing the tail towards the bottom left on purpose, which is for incoming messages. Challenge yourself to convert the incoming chat bubble to an outgoing chat bubble by drawing the tail on the bottom right, rounding the bottom left corner, and modifying the color scheme accordingly. As a next step, change the part II code to use your newly created chat bubble as custom shape.

Thanks for reading and watching!