Posted on Aug 18 • Originally published at getstream.io 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 🛠️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 videoIf 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 🌟.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: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.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.The BubbleView now looks exactly as we want it to look. So let’s move to the next component, 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.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.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.We start by creating another SwiftUI file called ThreadActivityRowView. The contents of this file should look like this.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.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.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.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()").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,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 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.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.Again very little code, but the end result should look something like this.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:Now run the project on a simulator.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 menuPaste the URL https://github.com/getstream/stream-chat-swiftuiIn 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 completeOnly select "StreamChatSwiftUI" and select "Add Package" againNow 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.Next, we need a view to show a chat interface.Create a SwiftUI file called ThreadChatView with the following contents.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.As the final item in this HStack add a NavigationLink sending the user to the ThreadChatView.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.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.Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Kemmy Mary Omoshoro - Apr 25 '22 Sebastian Ljungman - May 25 '22 Steven J. Selcuk - Apr 15 '22 Kristaps Grinbergs - May 19 '22 Once suspended, appforce1nl will not be able to comment or publish posts until their suspension is removed. Once unsuspended, appforce1nl will be able to comment and publish posts again. Once unpublished, all posts by appforce1nl will become hidden and only accessible to themselves. If appforce1nl is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Jeroen Leenarts. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag appforce1nl: appforce1nl consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging appforce1nl will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.