Creating a Chat Interface with SwiftUI

Photo by kuu akura on Unsplash

Messaging is an essential feature that exists in almost every mobile app we use today. In this tutorial, I’m going to show you how to implement a simple chat interface using SwiftUI.

Model

Create a new iOS app Xcode project and make sure to select SwiftUI for the interface. We’re first going to add a file to define a Message model. This model will represent a single message in a chat, and will contain relevant information that we will display to the user. Your Message file will look like so:

You may have noticed I also included the Role enum . A message is displayed differently based on whether you sent it or received it, and its role will allow us to determine how to do this.

View Model

Now that we’ve defined our model, we will define a simple view model that will drive the appearance of our UI. So let’s create a new class called ChatViewModel. This class will contain a couple of properties like the message currently being typed by the user (draftMessage) and the list of all messages in the chat…