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

16 min read

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!

Jeroen L.
Jeroen L.
Published August 17, 2023
Threads with user DM

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.

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.

Create Project in Xcode

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”..

Create File in Xcode

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.

Assets in Finder

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

Check Copy Items if Needed

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:

swift
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.

swift
        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())

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.

swift
        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")!)

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.

swift
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()
    }
}

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

Empty Preview with only "Hello"

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.

swift
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

It works in preview and looks really good.

Segmented Picker Completed

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

The Row View.

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

swift
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()

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.

Building your own app? Get early access to our Livestream or Video Calling API and launch in days!
swift
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

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

This is how it looks in preview.

ThreadActivityRowModel completed

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.

ThreadView
swift
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) {

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

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,

swift
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 {
Profile without Chat

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

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.

swift
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.

swift
import SwiftUI

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

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

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

Threads with tabs

Putting the

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:

swift
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.

Install SDK 1
  • Choose "Add Package" and wait for the dialog to complete
  • Only select "StreamChatSwiftUI" and select "Add Package" again
Install SDK 2

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.

swift
import SwiftUI
import StreamChat
import StreamChatSwiftUI

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

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

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

Create a SwiftUI file called ThreadChatView with the following contents.

swift
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"),

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.

swift
                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 {

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

swift
                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 {

This will result in a new button on the ProfileView.

Profile view with Chat

Tapping that button brings us to the view ThreadChatView.

Chat

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.

decorative lines
Integrating Video With Your App?
We've built an audio and video solution just for you. Launch in days with our new APIs & SDKs!
Check out the BETA!