Build a Pixel Perfect Threads Clone in Swift UI—With a Twist!

You've probably heard about the new Twitter competitor, Instagram Threads. It launched to great fanfare, but it's missing one crucial feature: DMs! Learn how to make a Threads clone—with a twist!

Whenever a new app arrives, it is a fun exercise to try and recreate its UI to learn exactly how it might be put together.

The Threads app UI is pretty straightforward with a few exceptions. The follower “bubble” and profile tab selection is the most interesting UI feature I’ve found in the Threads app.

In this blog post, we’ll create an Instagram Threads clone in Swift UI and to top it off use Stream’s chat API to add real-time user-to-user messaging. 😎

With the boring stuff out of the way, let’s jump into some code 🛠️

Getting Started

We are going to start by picking apart the Threads UI visually. Once we did that, we will create individual components and put everything together in a semi-working mockup implementation.

When looking at the Threads UI there are some immediately noticable things. The UI has a number of fun elements that both provide a strong Threads brand and look fun to recreate. I like to call those elements the “followers bubble” and the “profile detail tab selection”.

Everything else is a matter of stacking views together using HStacks and VStacks. It still baffles me how flexible these two layout elements are when using SwiftUI.

Threads introductory video

If you would like to follow along as we’re building or explore the project code, it is available on our Github here, don’t be shy, please leave us a 🌟.

The Follower Bubble

Right now we do not even have a project to work with, so let’s start there.

Open up Xcode and click “File” menu and then the entry “Create new Project”. Select “SwiftUI app” and give it any name you like.

We now have our empty project. Let’s rely on Xcode previews while we put together our project.

Create a new SwiftUI View (File -> New -> File -> SwiftUI View), name it “BubbleView”..

Before we can begin, we need some assets. The easiest way to resolve this is to delete the current “Assets” entry from the project and copy in the one from the completed repository. You can either download the project as a zip file or clone it to your machine: https://github.com/GetStream/threads-mock-chat/tree/main.

In this repository, you can find an Assets catalog in the directory “ThreadsChat” from the root of the repository. Drag and drop the Assets directory into your Xcode project.

Make sure the option “Copy items if needed” is checked. Now we have a set of assets available.

When looking at the BubbleView, you might have noticed it has 4 different display styles. Zero, one, two or more followers.

I skipped showing you the option with zero followers, because there is not much to see, just an empty black square.

Let’s define the basics of the BubbleView. Since we are dealing with a variable number of display styles based on follower count, adjust the auto-created BubbleView to look as follows:

struct BubbleView: View {
    var replyCount: Int

    var body: some View {
        Text("Hello, World!")
    }
}

struct BubbleView_Previews: PreviewProvider {
    static var previews: some View {
        BubbleView(replyCount: 0)
        BubbleView(replyCount: 1)
        BubbleView(replyCount: 2)
        BubbleView(replyCount: 3)
    }
}

In the preview area we can now select between 4 different previews of the same view. All looking the same.

Within the body of our new BubbleView, let’s add some code to change that.

        switch replyCount {
        case 0:
            Spacer()
        case 1:
            Image(systemName: "person")
                .resizable()
                .frame(width: 15, height: 15)
                .clipShape(Circle())
                .aspectRatio(contentMode: .fit)
        case 2:
            HStack {
                Image(systemName: "person")
                    .resizable()
                    .frame(width: 15, height: 15)
                    .clipShape(Circle())
                    .aspectRatio(contentMode: .fit)
                Image(systemName: "person")
                    .resizable()
                    .frame(width: 15, height: 15)
                    .clipShape(Circle())
                    .aspectRatio(contentMode: .fit)
            }
        default:
            HStack {
                Image(uiImage: UIImage(named: "jeroen")!)
                    .resizable()
                    .frame(width: 20, height: 20)
                    .clipShape(Circle())
                    .aspectRatio(contentMode: .fit)
                Image(uiImage: UIImage(named: "amos")!)
                    .resizable()
                    .frame(width: 20, height: 20)
                    .clipShape(Circle())
                    .aspectRatio(contentMode: .fit)
                Image(uiImage: UIImage(named: "kimmy")!)
                    .resizable()
                    .frame(width: 20, height: 20)
                    .clipShape(Circle())
                    .aspectRatio(contentMode: .fit)
            }
    }

We add a switch with 4 paths, zero, one, two and a default option. Each relates to one of the possible display styles of the bubble view. Note how we add an image, mark it resizable, choose a size, clip it to a circle.

It all looks great now, except for the default option. When you look at the fourth preview in Xcode, you notice that there are 3 images next to each other, while they should be grouped in a nice cluster.

We can fix that by switching the HStack of the default path to a ZStack and moving the images around a bit by using padding.

        default:
            ZStack {
                Image(uiImage: UIImage(named: "jeroen")!)
                    .resizable()
                    .frame(width: 20, height: 20)
                    .clipShape(Circle())
                    .aspectRatio(contentMode: .fit)
                    .padding(EdgeInsets(top: 0, leading: 0, bottom: -30, trailing: -5))
                Image(uiImage: UIImage(named: "amos")!)
                    .resizable()
                    .frame(width: 20, height: 20)
                    .clipShape(Circle())
                    .aspectRatio(contentMode: .fit)
                    .padding(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 30))
                Image(uiImage: UIImage(named: "kimmy")!)
                    .resizable()
                    .frame(width: 20, height: 20)
                    .clipShape(Circle())
                    .aspectRatio(contentMode: .fit)
                    .padding(EdgeInsets(top: 0, leading: 0, bottom: 30, trailing: -20))
            }

The BubbleView now looks exactly as we want it to look. So let’s move to the next component, the “profile detail tab selection”.

The Profile Detail Tab Selection

Since “profile detail tab selection” is quite a mouth full, let’s call this view SegmentedPickerView.

Again we create a new SwiftUI view called SegmentedPickerView.

There are a few tricks we put together for this challenging view, so let’s dive in. Let’s create a view to help with previewing the SegmentedPickerView we are going to create.

import SwiftUI

public struct SegmentedPickerView: View {
    public var body: some View {
        Text("Hello")
    }
}

struct SegmentedPickerViewPreviewHelperView: View {
    @State var selectedIndex: Int?

    var body: some View {
                SegmentedPickerView()
    }
}

struct SegmentedPickerView_Previews: PreviewProvider {
    @State var selectedIndex: Int = 0
    static var previews: some View {
        SegmentedPickerViewPreviewHelperView()
    }
}

This will just create an empty canvas with a single text.

Let’s start building things. Since it is a picker view, we need to be able to add subviews as content which we can select by tapping an area on screen.

After some trial and error, this is what I came up with.

import SwiftUI

public struct SegmentedPickerView<Element, Content, Selection>: View
    where
    Content: View,
    Selection: View {

    public typealias Data = [Element]

    @State private var frames: [CGRect]
    @Binding private var selectedIndex: Data.Index?

    private let data: Data
    private let selection: () -> Selection
    private let content: (Data.Element, Bool) -> Content

    public init(_ data: Data,
                selectedIndex: Binding<Data.Index?>,
                @ViewBuilder content: @escaping (Data.Element, Bool) -> Content,
                @ViewBuilder selection: @escaping () -> Selection) {

        self.data = data
        self.content = content
        self.selection = selection
        self._selectedIndex = selectedIndex
        self._frames = State(wrappedValue: Array(repeating: .zero,
                                                 count: data.count))
    }

    public var body: some View {
        ZStack(alignment: Alignment(horizontal: .horizontalCenterAlignment,
                                    vertical: .center)) {

            HStack(spacing: 0) {
                ForEach(data.indices, id: \.self) { index in
                    Button(action: { selectedIndex = index },
                           label: { content(data[index], selectedIndex == index) }
                    )
                    .buttonStyle(PlainButtonStyle())
                    .background(GeometryReader { proxy in
                        Color.clear.onAppear { frames[index] = proxy.frame(in: .global) }
                    })
                    .alignmentGuide(.horizontalCenterAlignment,
                                    isActive: selectedIndex == index) { dimensions in
                        dimensions[HorizontalAlignment.center]
                    }
                }
            }

            if let selectedIndex = selectedIndex {
                selection()
                    .frame(width: frames[selectedIndex].width,
                           height: frames[selectedIndex].height)
                    .alignmentGuide(.horizontalCenterAlignment) { dimensions in
                        dimensions[HorizontalAlignment.center]
                    }
            }
        }
    }
}

extension HorizontalAlignment {
    private enum CenterAlignmentID: AlignmentID {
        static func defaultValue(in dimension: ViewDimensions) -> CGFloat {
            return dimension[HorizontalAlignment.center]
        }
    }

    static var horizontalCenterAlignment: HorizontalAlignment {
        HorizontalAlignment(CenterAlignmentID.self)
    }
}

extension View {
    @ViewBuilder
    @inlinable func alignmentGuide(_ alignment: HorizontalAlignment,
                                   isActive: Bool,
                                   computeValue: @escaping (ViewDimensions) -> CGFloat) -> some View {
        if isActive {
            alignmentGuide(alignment, computeValue: computeValue)
        } else {
            self
        }
    }

    @ViewBuilder
    @inlinable func alignmentGuide(_ alignment: VerticalAlignment,
                                   isActive: Bool,
                                   computeValue: @escaping (ViewDimensions) -> CGFloat) -> some View {

        if isActive {
            alignmentGuide(alignment, computeValue: computeValue)
        } else {
            self
        }
    }
}

struct SegmentedPickerViewPreviewHelperView: View {

    @State private var selectedColorIndex = 0

    let titles = ["Threads", "Replies", "Reposts"]
    @State var selectedIndex: Int?

    var body: some View {
                SegmentedPickerView(
                            titles,
                            selectedIndex: Binding(
                                get: { selectedIndex },
                                set: { selectedIndex = $0 }),
                            content: { item, isSelected in
                                VStack {
                                    Text(item)
                                        .foregroundColor(isSelected ? Color("primaryThreads") : Color.gray )
                                        .padding(.horizontal, 16)
                                        .padding(.vertical, 8)
                                        .frame(maxWidth: .infinity)
                                    Color.gray.frame(height: 1)
                                }
                            },
                            selection: {
                                VStack(spacing: 0) {
                                    Spacer()
                                    Color.primary.frame(height: 1)
                                }
                            })
                            .onAppear {
                                selectedIndex = 0
                            }
                            .frame(maxWidth: .infinity)
                            .animation(.easeInOut(duration: 0.3), value: selectedIndex)
    }
}

struct SegmentedPickerView_Previews: PreviewProvider {
    @State var selectedIndex: Int = 0
    static var previews: some View {
        SegmentedPickerViewPreviewHelperView()
    }
}

It works in preview and looks really good.

Now we have our BubbleView and SegmentedPickerView, we can start building some real UI.

The biggest base elements are the rows in each List.

Create the ThreadActivityRowView

We start by creating another SwiftUI file called ThreadActivityRowView. The contents of this file should look like this.

import SwiftUI

struct ThreadActivityRowView: View {
    @StateObject
    var model: ThreadActivityRowModel
    var body: some View {
        NavigationLink {
            Text("Replace with the ThreadView(model: model)")
        } label: {
            VStack {
                HStack {
                    VStack {
                        ZStack(alignment: .bottomTrailing) {
                            Image(uiImage: model.avatarImage)
                                .resizable()
                                .frame(width: 30, height: 30)
                                .aspectRatio(contentMode: .fit)
                                .clipShape(Circle())
                            ZStack {
                                Circle()
                                    .frame(width: 15, height: 15)
                                    .foregroundColor(.white)
                                Image(systemName: "heart.circle.fill")
                                    .resizable()
                                    .frame(width: 15, height: 15)
                                    .foregroundColor(.red)
                            }
                            .padding(EdgeInsets(top: 0, leading: 0, bottom: -5, trailing: -5))
                        }
                        if model.isReply {
                            Spacer()
                        } else {
                            HStack {
                                Divider()
                            }
                        }
                    }

                    VStack {
                        HStack {
                            Text(model.username)
                                .foregroundColor(.primary)

                            Image(systemName: "checkmark.seal.fill")
                                .foregroundColor(.blue)
                            Spacer()
                            Text(model.postAge)
                                .foregroundColor(.secondary)
                            Text("···")

                        }
                        Text(model.message)
                            .frame(maxWidth: .infinity, alignment: .leading)
                            .foregroundColor(.primary)
                        if let image = model.image {
                            Image(uiImage: image)
                                .resizable()
                                .aspectRatio(contentMode: .fit)
                                .cornerRadius(15)
                        }
                        HStack {
                            Image(systemName: "heart")
                            Image(systemName: "bubble.right")
                            Image(systemName: "repeat")
                            Image(systemName: "paperplane")
                            Spacer()
                        }
                        .padding(.top, 10)
                    }
                }
                HStack {
                    if model.isReply {
                        Text(model.footer)
                            .frame(maxWidth: .infinity, alignment: .leading)
                            .foregroundColor(.secondary)
                            .padding(.leading, 40)
                    } else {
                        BubbleView(replyCount: model.replyCount)
                            .frame(width: 30, height: .infinity)

                        Text(model.footer)
                            .frame(maxWidth: .infinity, alignment: .leading)
                            .foregroundColor(.secondary)
                    }
                }
                Spacer()
            }
        }
    }
}

struct ThreadActivityRowView_Previews: PreviewProvider {
    static var previews: some View {
        ThreadActivityRowView(model: ThreadActivityRowModel(id: "2", username: "amos", message: "Hello world too!", image: UIImage(named: "Hotel"), likeCount: 51, replyCount: 1, postAge: "1h", replies: []))
    }
}

You can see it is a reasonably straightforward usage of various vertical and horizontal stacks.

We will also need its related model: ThreadActivityRowModel, so let’s add that to the file too.

class ThreadActivityRowModel: ObservableObject, Identifiable {
    init(id: String,
         username: String,
         message: String,
         image: UIImage?,
         likeCount: Int,
         replyCount: Int,
         postAge: String) {
        self.id = id
        self.username = username
        self.message = message
        self.image = image
        self.likeCount = likeCount
        self.replyCount = replyCount
        self.postAge = postAge
        self.replies = []
        self.isReply = true
    }

    init(id: String,
         username: String,
         message: String,
         image: UIImage?,
         likeCount: Int,
         replyCount: Int,
         postAge: String,
         replies: [ThreadActivityRowModel]) {
        self.id = id
        self.username = username
        self.message = message
        self.image = image
        self.likeCount = likeCount
        self.replyCount = replyCount
        self.postAge = postAge
        self.replies = replies
        self.isReply = false
    }

    var id: String
    var username: String
    var message: String
    var image: UIImage?
    var likeCount: Int
    var replyCount: Int
    var postAge: String
    var isReply: Bool
    var replies: [ThreadActivityRowModel]

    private var likeString: String? {
        switch likeCount {
        case 0:
            return nil
        case 1:
            return "1 like"
        default:
            return "\(likeCount) likes"
        }
    }

    private var replyString: String? {
        switch replyCount {
        case 0:
            return nil
        case 1:
            return "1 reply"
        default:
            return "\(replyCount) replies"
        }
    }

    var footer: String {
        let footerStrings: [String] = [likeString, replyString].compactMap { $0 }
        return footerStrings.joined(separator: " • ")
    }

    var avatarImage: UIImage {
        return UIImage(named: username) ?? UIImage(systemName: "person")!
    }
}

The ThreadActivityRow is a view we will be using on almost all other screens.

This is how it looks in preview.

The layout looks a bit off in Preview, but when put in an actual view everything lines up as it should.

Now we can move on with building the underlying ThreadView.

Building the ThreadView

The ThreadView is a drill down from the main navigation in our app to a specific Thread. It reuses the ThreadActivityRowView. So is, again, pretty straightforward to build.

import SwiftUI

struct ThreadView: View {
    @StateObject
    var model: ThreadActivityRowModel

    var body: some View {
        ScrollView {
            VStack {
                HStack {
                    NavigationLink {
                        Text("Replace me with ProfileView()")
                    } label: {
                        HStack {
                            ZStack(alignment: .bottomTrailing) {
                                Image(uiImage: model.avatarImage)
                                    .resizable()
                                    .frame(width: 30, height: 30)
                                    .aspectRatio(contentMode: .fit)
                                    .clipShape(Circle())
                                ZStack {
                                    Circle()
                                        .frame(width: 15, height: 15)
                                        .foregroundColor(.white)
                                    Image(systemName: "heart.circle.fill")
                                        .resizable()
                                        .frame(width: 15, height: 15)
                                        .foregroundColor(.red)
                                }
                                .padding(EdgeInsets(top: 0, leading: 0, bottom: -5, trailing: -5))
                            }
                            Text(model.username)
                            Image(systemName: "checkmark.seal.fill")
                                .foregroundColor(.blue)
                        }
                    }
                    Spacer()
                    Text(model.postAge)
                        .foregroundColor(.secondary)
                    Text("···")

                }
                Text(model.message)
                    .frame(maxWidth: .infinity, alignment: .leading)
                if let image = model.image {
                    Image(uiImage: image)
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .cornerRadius(15)
                }
                HStack {
                    Image(systemName: "heart")
                    Image(systemName: "bubble.right")
                    Image(systemName: "repeat")
                    Image(systemName: "paperplane")
                    Spacer()
                }
                .padding(.top, 10)
                Text(model.footer)
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .foregroundColor(.secondary)
                ForEach(model.replies) { reply in
                    Divider()
                        .padding(.horizontal, 0)
                    ThreadActivityRowView(model: reply)
                }
                .listStyle(PlainListStyle())
            }
            .padding()
        }
        .navigationTitle("Thread")
    }
}

struct ThreadView_Previews: PreviewProvider {
    static var previews: some View {
        let model = ThreadActivityRowModel(id: "1", username: "nash", message: "Hello world!", image: UIImage(named: "Swift"), likeCount: 8, replyCount: 23, postAge: "10m", replies: [
            ThreadActivityRowModel(id: "5", username: "kimmy", message: "This is awesome!", image: nil, likeCount: 51, replyCount: 1, postAge: "30mh"),
            ThreadActivityRowModel(id: "6", username: "jeroen", message: "Such a cool feature.", image: nil, likeCount: 51, replyCount: 1, postAge: "10m"),
            ThreadActivityRowModel(id: "7", username: "amos", message: "Let's go!", image: nil, likeCount: 51, replyCount: 1, postAge: "1m")])

        ThreadView(model: model)
    }
}

Go back to the ThreadActivityRowView and replace the line Text("Replace with the ThreadView(model: model)") with ThreadView(model: model)

Next, we need to move to the ProfileView. This is a view we can navigate to from the ThreadView. In the ThreadView we created you might have noticed a Text("Replace me with ProfileView()").

Creating the ProfileView

Create a SwiftUI file called ProfileView. In the ThreadView replace the occurrence of Text("Replace me with ProfileView()") with ProfileView(). Now go back to the ProfileView file.

Paste the following into the ProfileView file, replacing all code currently present in the file. Notice how we again reuse the row view,

import SwiftUI

struct ProfileView: View {

    @State private var selectedColorIndex = 0
    @StateObject private var viewModel = ThreadsViewModel()

    let titles = ["Threads", "Replies", "Reposts"]
    @State var selectedIndex: Int?

    var body: some View {
        ScrollView {
            VStack {
                HStack {
                    VStack {
                        Text("Neevash Ramdial")
                            .frame(maxWidth: .infinity, alignment: .leading)
                        HStack {
                            Text("nash0x7e2")
                            Capsule()
                                .fill(.tertiary)
                                .frame(width: 80)
                                .overlay {
                                    Text("threads.net")
                                        .font(.footnote)
                                        .foregroundColor(.secondary)
                                }
                            Spacer()
                        }

                    }
                    Spacer()
                    Image(uiImage: UIImage(named: "nash")!)
                        .resizable()
                        .frame(width: 60, height: 60)
                        .aspectRatio(contentMode: .fit)
                        .clipShape(Circle())
                }
                Text("Leading #DevRel/Dev Marketing at @getstream_io • @GoogleDevExpert Dart & Flutter • @FlutterComm • Formula 1 fanatic • Striving for excellence")
                HStack {
                    Image(uiImage: UIImage(named: "amos")!)
                        .resizable()
                        .frame(width: 20, height: 20)
                        .aspectRatio(contentMode: .fit)
                        .clipShape(Circle())
                    Image(uiImage: UIImage(named: "jeroen")!)
                        .resizable()
                        .frame(width: 20, height: 20)
                        .aspectRatio(contentMode: .fit)
                        .clipShape(Circle())
                        .padding(EdgeInsets(top: 0, leading: -15, bottom: 0, trailing: 0))
                    Image(uiImage: UIImage(named: "kimmy")!)
                        .resizable()
                        .frame(width: 20, height: 20)
                        .aspectRatio(contentMode: .fit)
                        .clipShape(Circle())
                        .padding(EdgeInsets(top: 0, leading: -15, bottom: 0, trailing: 0))
                    Text("52.321 followers • neevash.dev")
                    Spacer()
                }
                HStack {
                    Button {
                        // TODO
                    } label: {
                        Text("Follow")
                            .frame(minWidth: 100, maxWidth: .infinity, minHeight: 40)
                            .background(Color.primary)
                            .foregroundStyle(.background)
                            .cornerRadius(10)
                            .overlay(
                                    RoundedRectangle(cornerRadius: 10)
                                        .stroke(.gray, lineWidth: 2))
                    }

                    Button {
                        // TODO
                    } label: {
                        Text("Mention")
                            .frame(minWidth: 100, maxWidth: .infinity, minHeight: 40)
                            .background(.background)
                            .foregroundStyle(Color.primary)
                            .cornerRadius(10)
                            .overlay(
                                    RoundedRectangle(cornerRadius: 10)
                                        .stroke(.gray, lineWidth: 2))
                    }
                }
                SegmentedPickerView(
                            titles,
                            selectedIndex: Binding(
                                get: { selectedIndex },
                                set: { selectedIndex = $0 }),
                            content: { item, isSelected in
                                VStack {
                                    Text(item)
                                        .foregroundColor(isSelected ? Color("primaryThreads") : Color.gray )
                                        .padding(.horizontal, 16)
                                        .padding(.vertical, 8)
                                        .frame(maxWidth: .infinity)
                                    Color.gray.frame(height: 1)
                                }
                            },
                            selection: {
                                VStack(spacing: 0) {
                                    Spacer()
                                    Color.primary.frame(height: 1)
                                }
                            })
                            .onAppear {
                                selectedIndex = 0
                            }
                            .frame(maxWidth: .infinity)
                            .animation(.easeInOut(duration: 0.3), value: selectedIndex)

                ForEach(viewModel.activities) { item in
                        ThreadActivityRowView(model: item)
                    }
            }
        }
        .toolbar {
            Spacer()
            Image(uiImage: UIImage(named: "Instagram")!)
                .resizable()
                .frame(width: 20, height: 20)
            Image(systemName: "bell.fill")
            Image(systemName: "ellipsis.circle")
        }
        .padding()
    }
}

struct ProfileView_Previews: PreviewProvider {
    static var previews: some View {
        NavigationStack {
            ProfileView()
        }
    }
}

class ThreadsViewModel: ObservableObject {
    @Published public var activities: [ThreadActivityRowModel] = [
        ThreadActivityRowModel(id: "1", username: "nash", message: "Hello world!", image: UIImage(named: "Swift"), likeCount: 8, replyCount: 23, postAge: "10m", replies: [
            ThreadActivityRowModel(id: "5", username: "kimmy", message: "This is awesome!", image: nil, likeCount: 51, replyCount: 1, postAge: "30mh"),
            ThreadActivityRowModel(id: "6", username: "jeroen", message: "Such a cool feature.", image: nil, likeCount: 51, replyCount: 1, postAge: "10m"),
            ThreadActivityRowModel(id: "7", username: "amos", message: "Let's go!", image: nil, likeCount: 51, replyCount: 1, postAge: "1m")
        ]),
        ThreadActivityRowModel(id: "2", username: "amos", message: "Hello world too!", image: UIImage(named: "Hotel"), likeCount: 51, replyCount: 1, postAge: "1h", replies: []),
        ThreadActivityRowModel(id: "3", username: "kimmy", message: "Hello world! This is going to be a really long message. I want to see what happens with a lond message. Does it work ok?", image: UIImage(named: "React"), likeCount: 5, replyCount: 2, postAge: "2h", replies: []),
        ThreadActivityRowModel(id: "4", username: "jeroen", message: "Hello world! This is going to be a really long message. I want to see what happens with a lond message. Does it work ok?", image: nil, likeCount: 5, replyCount: 0, postAge: "2h", replies: [])

    ]
}

We now have the ActivityRowView, ThreadView, and ProfileView. We only need to alter the entry point of the app and make sure we show a list of Threads.

Let’s create the list of Threads first.

Create the ThreadsView

Create a file called ThreadsView. Notice the plural Threads.

Make sure the content of this file looks as follows and notice how little code we need to write since we did all the work already in previous views.

import SwiftUI

struct ThreadsView: View {

    @StateObject private var viewModel = ThreadsViewModel()

    var body: some View {

        List(viewModel.activities) { item in
            ThreadActivityRowView(model: item)
        }
        .listStyle(PlainListStyle())
    }
}

struct ThreadsView_Previews: PreviewProvider {
    static var previews: some View {
        ThreadsView()
    }
}

Since we would like to have a tab bar at the bottom, we also create a file called ThreadsTabView.

The contents of this file should look as follows.

import SwiftUI

struct ThreadsTabView: View {
    var body: some View {
        TabView {
            NavigationStack {
                ThreadsView()
            }
                .tabItem {
                    Image(systemName: "house")
                }

            Text("")
                .tabItem {
                    Image(systemName: "magnifyingglass")
                }

            Text("")
                .tabItem {
                    Image(systemName: "square.and.pencil")
                }

            Text("")
                .tabItem {
                    Image(systemName: "heart")
                }

            ProfileView()
                .tabItem {
                    Image(systemName: "person")
                }
        }
    }
}

struct ThreadsTabView_Previews: PreviewProvider {
    static var previews: some View {
        ThreadsTabView()
    }
}

Again very little code, but the end result should look something like this.

Putting the ThreadsTabView in the App class

The final thing we need to do is add the ThreadsTabView to the app struct to show our UI when starting the app.

To do that, open up the project’s app file. If you named your project ThreadsChat, the file should be named ThreadsChatApp.

Make its contents look like:

import SwiftUI


@main
struct ThreadsChatApp: App {
    var body: some Scene {
        WindowGroup {
            ThreadsTabView()
        }
    }
}

Now run the project on a simulator.

Adding DMs

We’ve now completed the rebuild of a UI looking like Meta Threads. But we promised to add a DM feature to this project.

To do that we first need to add the Stream Chat SDK to the project.

• Select "Add Packages…" in File menu

• Paste the URL https://github.com/getstream/stream-chat-swiftui

• In the option "Dependency Rule" choose "Branch", in the single text input next to it, enter "main"

• Choose "Add Package" and wait for the dialog to complete

• Only select "StreamChatSwiftUI" and select "Add Package" again

Now we need to do a few things to load and initialize the Stream Chat SDK.

Open up the App file and change its contents to look like this.

import SwiftUI
import StreamChat
import StreamChatSwiftUI

@main
struct ThreadsChatApp: App {
    @UIApplicationDelegateAdaptor(AppDelegate.self) var appDelegate

    var body: some Scene {
        WindowGroup {
            ThreadsTabView()
        }
    }
}


class AppDelegate: NSObject, UIApplicationDelegate {

    var streamChat: StreamChat?

    var chatClient: ChatClient = {
        var config = ChatClientConfig(apiKey: .init("8br4watad788"))

        let client = ChatClient(config: config)
        return client
    }()

    func application(_ application: UIApplication,
                     didFinishLaunchingWithOptions launchOptions:
                        [UIApplication.LaunchOptionsKey: Any]? = nil) -> Bool {
        // The `StreamChat` instance we need to assign
        streamChat = StreamChat(chatClient: chatClient)

        // Calling the `connectUser` functions
        connectUser()

        return true
    }

    // The `connectUser` function we need to add.
    private func connectUser() {
        // This is a hardcoded token valid on Stream's tutorial environment.
        let token = try! Token(rawValue: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoibHVrZV9za3l3YWxrZXIifQ.kFSLHRB5X62t0Zlc7nwczWUfsQMwfkpylC6jCUZ6Mc0")

        // Call `connectUser` on our SDK to get started.
        chatClient.connectUser(
                userInfo: .init(id: "luke_skywalker",
                                name: "Luke Skywalker",
                                imageURL: URL(string: "https://vignette.wikia.nocookie.net/starwars/images/2/20/LukeTLJ.jpg")!),
                token: token
        ) { error in
            if let error = error {
                // Some very basic error handling only logging the error.
                log.error("connecting the user failed \(error)")
                return
            }
        }
    }
}

Next, we need a view to show a chat interface.

Create a SwiftUI file called ThreadChatView with the following contents.

import SwiftUI

import StreamChat
import StreamChatSwiftUI

struct ThreadChatView: View {

    @Injected(\.chatClient) var chatClient
    @UIApplicationDelegateAdaptor(AppDelegate.self) var appDelegate

    var body: some View {
        ChatChannelView(
            viewFactory: DefaultViewFactory.shared,
            channelController: chatClient.channelController(
                           for: try! ChannelId(cid: "messaging:my-channel-id"),
                            messageOrdering: .topToBottom
                        )
                        )

    }
}

struct ThreadChatView_Previews: PreviewProvider {
    static var previews: some View {
        ThreadChatView()
    }
}

Next, we need to make sure we can get to this new view. To do that we open up the ProfileView and look for the HStack with the empty buttons.

                HStack {
                    Button {
                        // TODO
                    } label: {
                        Text("Follow")
                            .frame(minWidth: 100, maxWidth: .infinity, minHeight: 40)
                            .background(Color.primary)
                            .foregroundStyle(.background)
                            .cornerRadius(10)
                            .overlay(
                                    RoundedRectangle(cornerRadius: 10)
                                        .stroke(.gray, lineWidth: 2))
                    }

                    Button {
                        // TODO
                    } label: {
                        Text("Mention")
                            .frame(minWidth: 100, maxWidth: .infinity, minHeight: 40)
                            .background(.background)
                            .foregroundStyle(Color.primary)
                            .cornerRadius(10)
                            .overlay(
                                    RoundedRectangle(cornerRadius: 10)
                                        .stroke(.gray, lineWidth: 2))
                    }
                }

As the final item in this HStack add a NavigationLink sending the user to the ThreadChatView.

                HStack {
                    Button {
                        // TODO
                    } label: {
                        Text("Follow")
                            .frame(minWidth: 100, maxWidth: .infinity, minHeight: 40)
                            .background(Color.primary)
                            .foregroundStyle(.background)
                            .cornerRadius(10)
                            .overlay(
                                    RoundedRectangle(cornerRadius: 10)
                                        .stroke(.gray, lineWidth: 2))
                    }

                    Button {
                        // TODO
                    } label: {
                        Text("Mention")
                            .frame(minWidth: 100, maxWidth: .infinity, minHeight: 40)
                            .background(.background)
                            .foregroundStyle(Color.primary)
                            .cornerRadius(10)
                            .overlay(
                                    RoundedRectangle(cornerRadius: 10)
                                        .stroke(.gray, lineWidth: 2))
                    }

                    NavigationLink {
                        ThreadChatView()
                            .toolbar(.hidden, for: .tabBar)

                    } label: {
                        Text("Chat")
                            .frame(minWidth: 100, maxWidth: .infinity, minHeight: 40)
                            .background(.background )
                            .foregroundStyle(Color.primary)
                            .cornerRadius(10)
                            .overlay(
                                    RoundedRectangle(cornerRadius: 10)
                                        .stroke(.gray, lineWidth: 2))
                    }
                }

This will result in a new button on the ProfileView.

Tapping that button brings us to the view ThreadChatView.

Notice how the ChatChannelView is created and added to the view hierarchy with minimal effort and the end user can just start chatting when they land on this view.

We have integrated Stream Chat into our Threads-inspired user interface mockup. This not only highlights the seamless integration available by using our Chat SDKs but also offers visually stunning screenshots that showcase the potential look of Meta's Threads, but with an in-app chat feature.

Conclusion

By now you will have noticed how easy it can be to add chat to anything. If you have a suggestion of a mash-up we can add chat to, please reach out through Twitter. We love to hear from you to learn what you feel might be interesting to explore.

This article barely scratches the surface of what our Chat SDK can do. You will probably want to make our chat screens look just like the rest of your app. And that’s where theming and styling come in. Fortunately, we have an excellent quick-start guide about theming available.