SwiftUI: Creating a Chat Bubble (like iMessage) using Path and Shape

How to create iMessage like chat Bubble using SwiftUI?

Demo — works with iOS 13+(compiled on Xcode 12 Beta)

In this tutorial, We will learn how to create bubble with tail(like iMessage chat bubble). This tutorial is not to create an end to end chat UI.

Implementation Logic

1. Create Path like Chat Bubble in Shape Struct drawing view.
2. This Shape will take the tail direction as parameter to define shape.
3. Create a container View, This view will contain message/Image and give it shape.
4. This Container view will also manage view orientation. i.e. right/left align bubble

Creating Bubble Path

Although, we can write it directly via code. We used Paintcodeapp to draw the Shape and test in real time.

The logic is to take all four corner, Make rounded corner in three side. For one remaining side, we will create an inverted heart.